Search code examples
cssfluid-layout

Scale image with CSS but limit to orignial size

For a responsive design, i would like to scale down some images:

img {
    width:100%;
    height:auto;
}

This works as expected, but if the width of the screen exceeds the original size of the image, it blows up the image.

Is there a way to limit this scaling to its original size? So that it only gets smaller if necessary?

Thanks in advance for your answer.

Willem

Solution

  • You could use max-width to prevent image width from becoming larger than original size.

    img {
    width: auto;
    max-width: 100%;
    height: auto;
}