Question

I am trying to use CSS to scale my images to precise values:

HTML:

<div id="thumbnail-container">
    <img src="sample-pic.jpg"/>
</div>

CSS:

#thumbnail-container img {
    max-height: 230px;
    max-width: 200px;
}

In this example, sample-pic.jpg is actually 320×211.

In Firefox 11.0, this code works perfectly fine, and FF resizes sample-pic.jpg to the 230×211 max constraints set forth in the CSS rule.

In IE 9, however, the max-height and max-width rules are completely ignored and the image renders as its usual 320×211 size.

How can I modify the HTML/CSS so that both IE 9 and FF 11.0 both honor these max constraints? Thanks in advance!

Answer 1

IE7+ supports max-width and max-height.

Demo at http://jsfiddle.net/gaby/qE6w6/

check that you page runs in standards mode.. (make sure there is a valid doctype)