Make images scale to parent div only when larger, all while using an explicit max-width

css, responsive-design

Solution

You can set the image's max-width: 100%; which would limit its size only if it's bigger than its parent.

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

Demo here: http://jsfiddle.net/LMEwC/

Problem

I can make an image scale responsively to a parent div on smaller screens but still limit to an explicit max width: ``` img { max-width: 500px; width: 100%; } ``` However, if the image is smaller than the parent div, it is still stretched to fill the div. Is there a way to have it scale to 100% only when it is larger and maintain its original dimensions when it is smaller, without knowing the image's dimensions beforehand?

Original source