Image mysteriously ignoring max-width in Firefox & IE

Question

So I\'m trying to display images as big as possible with no cropping on any screen size. This means height: 100%; width: auto in landscape and

Answer 1

My fix was two-fold. It worked when no other suggestions did. It uses targeting for FF only, the older width: 100% fix, and an additional experimental property.

To get it to work I did the following:

@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

The magic bullet was the experimental -moz-max-content value. Combined with width: 100%, it makes FF behave like Safari/Chrome's max-width: 100%; setup.

I found this out from the following source:

http://ss64.com/css/max-width.html

Answer 2

You have max-width: 100%, but 100% of what? Of the parent width, right? But the parent is an inline-block (with class="sponsor") whose width is not set, so its width depends on the children, and in particular on the preferred width of the children.

The layout of this styling is undefined in the CSS specification. In particular, the intrinsic width of the kids in this case depends on the width of the parent which in turn depends on the intrinsic width of the kids. See http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the relevant spec text and note all the "does not define" bits.

I recommend giving your <div class="sponsor"> a width. That should deal with the problem, I would think.