1

I have a grid of profile pictures I am displaying in a window that is exactly 100x150.

The source images very in size from 60x60 to 300x300. (some too big, some too small)

What I have done that works in all browsers except IE8+ is put the img tag inside of a div.

The div has the exact height set, with overflow hidden, and the img has min/max width and height set.

All browsers except IE will change the width/height to the min/max levels without changing the aspect ratio; IE changes the aspect ration(changes width and height independently).

background-size:cover is out because IE8 does not support it.

Ideas?

Wesley
  • 5,381
  • 9
  • 42
  • 65

2 Answers2

1

Instead of using min/max width and height; set the width for each image. Browsers (includign IE) will resize the image maintaining aspect ratio when only one parameter in the <img /> tag is supplied. Like this:

<div style="width: 100px; height: 150px;">
    <img src="#" style="width: 100px;" alt="#" />
</div>
dSquared
  • 9,725
  • 5
  • 38
  • 54
  • 1
    This would work great if either the width or height was always wide enough. However some images are too narrow, some too short. Tried this already :( – Wesley Nov 11 '11 at 22:36
1

i think you need script like this: set width of image = width of parent (div with overflow): height of image < height of div? yes: set height of image = height of div (extra width will be hidden by overflow div) no: all ok. height will be hidden

there are jquery plugins that do such things. they are called like "background image plugin", something like that. but it is easy to write own.

looks like my words in code: How to resize images proportionally / keeping the aspect ratio?

Community
  • 1
  • 1
korywka
  • 7,537
  • 2
  • 26
  • 48