15

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)..

johneth
  • 2,858
  • 5
  • 27
  • 26
  • http://stackoverflow.com/questions/2786806/max-widgth-and-max-height-solution-in-internet-explorer – Jeff Rupert Sep 04 '10 at 13:54
  • I have tried those solutions, but they don't seem to work. – johneth Sep 04 '10 at 14:09
  • Please be more specific about what the problem is, and especially which version(s) of IE you are talking about. The properties should work fine in IE 7 and above. – Pekka Sep 04 '10 at 14:35
  • 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;), but rather that 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). (Edited the question to include this) – johneth Sep 04 '10 at 14:46
  • could it be that you are forcing a width or height upon the image at some point? The aspect ratio should not break in any browser otherwise. You can use IE8's element inspector (Press F12) to see what CSS rules apply to the element – Pekka Sep 04 '10 at 15:09

1 Answers1

37

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.

O.Foxley
  • 386
  • 4
  • 3
  • I was running into this issue, with a bit of a twist, but this fixed it. Thanks! – Michael Warkentin May 16 '12 at 16:08
  • Also if you need to also set a percentage width - say 90% instead of 100% - you'll need to use a div to contain the image IE8 doesn't seem to allow a percentage width and a max/min-width – Ed Kirk Oct 17 '12 at 12:24
  • 2
    Thank you, this fixed it also for me. And IE sucks, maybe if we say this often enough, they will start building a good browser. – staccata Apr 29 '13 at 11:48
  • Thank god. I love StackOverflow for little tidbits like this. Headache=gone – ChaseMoskal Mar 16 '15 at 15:01
  • in 2017, there remains IE11: https://stackoverflow.com/questions/41489798/keep-image-ratio-using-max-width-and-max-height-in-ie-11/43227016#43227016 – benzkji Dec 22 '17 at 12:19