5

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.

On Chrome 12
(source: imgh.us)

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

On Opera 11
(source: imgh.us)

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

Community
  • 1
  • 1
Arnaud Leymet
  • 5,995
  • 4
  • 35
  • 51

2 Answers2

2

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Nice. Actually I can't work around by removing the `overflow:hidden`. I need the div width to be correct so that I can add other content inside, as you can see when hovering the live demo. – Arnaud Leymet Apr 29 '11 at 17:57
  • In that case, your best workaround is to set the pixel height or `inherit` on the child of the `overflow:hidden` div in addition to the `overflow:hidden` div, instead of using `100%`. – Boris Zbarsky Apr 29 '11 at 20:08
  • That is a nice complement of two7s_clash explanation. – Arnaud Leymet Apr 30 '11 at 12:48
1

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.

two7s_clash
  • 5,755
  • 1
  • 27
  • 44
  • Interesting. Seems that you're just plain right! You must be the author of http://jsfiddle.net/uJMce/5/ ? If this is the case, would you be able to prevent from using a fixed `top` value for the `.ui` CSS class? The fact is that I can't know what will be the size of the picture in my real case scenario. Hence, this should be generic. – Arnaud Leymet Apr 29 '11 at 13:55
  • @Aranud No, thats not me. Looks like you changed your demo and that you're now asking a different question. – two7s_clash Apr 29 '11 at 14:43
  • Actually I changed the demo link to reflect the answer I assumed was yours. Anyway, your answer is correct, and if there is no better proposition (like a workaround), the point will be yours. – Arnaud Leymet Apr 29 '11 at 17:59