Question

I have a grid in which I display images. Each image is supposed to adapt itself to the cell size.

I am using this css to adapt the image automatically :

img {
  max-width: 100%;
  max-height: 100%;
}

Then when I resize the div (cell) containing the image, the image should adapt to the div. It works properly under Chrome/Firefox.
On Safari 5.1.7 (Win 7), it works when changing the width of the div, but does not work for the height.

I created a sample case here : http://jsfiddle.net/MNL29/7/

The height button increases the height of the div, the width button changes the width and the image won’t resize under Safari.

Why is this happening and is there a way around it (without Javascript) ?

Answer 1

New version

div {
  height: 100px;
  width: 200px;
  background: red;
  position: relative;
}

img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

Seems to be working as expected. Fiddle