Make an image width 100% of parent div, but not bigger than its own width.

Question

Hi. I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:

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

Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?

Answer 1

Just specify max-width: 100% alone, that should do it.

Answer 2

For a max-width that also works on Internet Explorer, you might have to do something like this:

width: auto !important; /*override the width below*/
width: 100%;
max-width: 100%;