max-width and max-height for scaling images in Internet Explorer

Question

I'm in the process of creating a gallery which displays several formats of images (wide, square and tall) in a fixed space. The ideal solution would be to have all the images to be the same dimensions, but this cannot be achieved.

I'm using a combination of max-width and max-height to ensure that images scale properly to the limited space. The only problem with this is Internet Explorer, which displays images at the max-width and max-height widths and heights (because of it's inability to understand them).

I've been looking at various solutions to this problem, but haven't managed to make any of them work (yet). The gallery uses jQuery and Galleriffic, which work fine except for the max-width/max-height issue.

Any suggestions?

Edit: It seems that the problem lies in the way Internet Explorer handles max-height and max-width with images, in that they don't scale correctly.

Edit 2: I've done a bit of testing and the problem with IE isn't max-width and max-height, which are working (in that they're making sure the image doesn't become larger than what it's set to), for example:

max-width: 600px; max-height: 600px;

will make sure that the image does not become larger than those two values. The images are not scaling properly, so tall images will appear squashed and wide images will appear stretched. I switched on IE7 Compatibility view and the images displayed correctly, but in IE8, the appear squashed/stretched (which means it'll be a problem with IE8)..

Answer 1

have you tried height:auto and width:auto as well as using max-height and max-width, this usually results in IE rendering the correct aspect ratio.