Geek Answers Handbook

Scaling an image container with a height of 100%

I am using an image that should automatically scale inside a div whose height is determined by the root div. Scaling is available in all major browsers, using height: 100%for the image itself. But it seems that in some browsers, the image container does not adapt its width according to its contents (image).

Check out the live demo yourself .

This demo uses an image container with a blue background.

Expected behavior: This background should not be displayed, since the width and height of the container should be the same as its contents (image).

Actual behavior :

  • In Chrome 11, Safari 5, and IE9, the behavior will be as expected.

On chrome 12

  • In Firefox 3.6 / 4.0 and Opera 11, the behavior is not as expected: a blue background is displayed.

On opera 11

What is the main reason for this strong difference between major browsers?

+5
source share
2 answers

In the case of Firefox, this looks like an error. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=653739

You can work around by deleting overflow:hiddenif you really do not need it.

+2
source

These later browsers more strictly interpret inline-block(correctly).

That is, your element is positioned inline (for example, span), but the contents of the element are laid out as if this element was a block.

+1

More articles:


All Articles