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