CSS 图像的容器缩放为 100% 高度
我使用的图像必须在高度由根 div 定义的 div 内自动缩放。 在所有主要浏览器中缩放都很好，在图像本身上使用 height: 100% 。 但似乎在某些浏览器上，图像容器不会根据其内容（图像）调整其宽度。
亲自检查现场演示。
该演示使用蓝色背景的图像容器。
预期行为：不应显示此背景，因为容器的宽度和高度应与其内容（图像）相同。
实际行为：
- 在 Chrome 11、Safari 5 和 IE9 上，行为符合预期。
（来源：imgh.us）
- Firefox 3.6/4.0 和 Opera 11，行为不符合预期：显示蓝色背景。
（来源：imgh.us）
什么主流浏览器之间存在如此巨大差异的根本原因是什么？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于 Firefox，这看起来像是一个错误。我提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=653739
除非您确实需要，否则您可以通过删除
overflow:hidden来解决此问题。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:hiddenunless you actually need it.这些后来的浏览器更严格（正确）地解释
inline-block。也就是说，您的元素是内联定位的（如跨度），但元素的内容的布局就像该元素是一个块一样。
Those later browsers interpret
inline-blockmore 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.