CSS image's container scaling with a 100% height

Question

I'm using an image which must auto-scale inside a div whose height is defined by the root div. The scaling is fine in all major browsers, using height: 100% on the image itself. But it seems that on some browsers, the image container doesn't adapt its width accordingly to its content (the image).

Check by yourself the live demo.

This demo uses an image container with a blue background.

Expected behavior: This background shouldn't display since the container width and height should be the same as its content (the image).

Actual behavior:

• On Chrome 11, Safari 5 and IE9, the behavior is as expected.

_{(source: imgh.us)}

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

_{(source: imgh.us)}

What is the root cause of this strong difference between major browsers?

Answer 1

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

You can work around by removing the overflow:hidden unless you actually need it.

Answer 2

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

That is, your element is positioned inline (like a span), but the element's contents are laid out as if the element were a block.