我有一个包含两个容器的标记。 第一个设置为“position:absolute”，所有 4 个“坐标”在整个网站上展开(left=right=bottom=top=30px)。
在该容器内是另一个容器，其高度设置为“100%”和“display:inline-block”(“inline-block”是因为第二个容器应仅水平扩展到所需的宽度)。
在第二个容器中是一个图像，其高度设置为“100%”，宽度设置为“自动”，因此图像始终与两个容器一样高，并且仍然具有正确的比例。
我需要这个第二个容器，因为我想在这个容器中放置一些绝对定位的元素，以便始终出现在图像的右侧。
问题如下:在 Firefox 中，第二个容器不会随着图像的自动宽度水平增长/扩展。它保持在图像的原始宽度。 在 Safari/Chrome 中没有问题，只有 Firefox。
在这里您可以找到一个示例 fiddle :http://jsfiddle.net/EGRCQ/ 第一个容器是蓝色容器。 在这个里面你会发现第二个容器(红色)和这个容器中的一个示例图像。 如果将输出窗口的高度降低到 180px 以下，就会出现问题(红色容器变得可见)，或者您只需使用 Firebug 检查其宽度。
HTML
<body>
<div id="container1">
<div id="container2">
<img src="http://cdn4.spiegel.de/images/image-491267-thumb-wjvo.jpg"
width="180" height="180" />
</div>
</div>
</body>
CSS
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container1 {
background: aqua;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
}
#container2 {
background: red;
height: 100%;
display: inline-block;
}
#container2 img {
height: 100%;
width: auto;
}
谢谢，
丹尼尔
最佳答案
收缩包裹流体图像
此问题的一个版本也出现在 IE10、Chrome 和 Safari 中。如果图像是部分透明的，则更明显，如 modified demo . container2 在页面首次加载时按预期调整大小，但如果调整浏览器大小，它会保持其初始宽度。
Opera 的行为与 Firefox 相同。
似乎 container2 的收缩包装(它的宽度只是适应其内容所需的宽度)在某种程度上取决于子内容的已知宽度。对于 Firefox 和 Opera，当为子图像指定 width:auto 时，它会使用图像的自然宽度，而不考虑实际缩放后的宽度。其他浏览器在收缩容器 container2 时能够计算显示宽度，但它们仅在页面首次加载时才这样做；之后，继续使用最初计算的值。
简而言之，Firefox 和 Opera 从不执行宽度计算。而其他浏览器仅在页面首次加载时执行它，而不是在浏览器重新调整大小时执行。
解决方法
似乎没有明显的方法可以强制浏览器对子图像执行宽度计算；但是，如果需要 container2 的唯一原因是将其他内容绝对定位在图像的右侧，那么还有另一种方法可以实现此目的:
不是将容器收缩包裹在图像周围，而是在它旁边放置一个元素(inline-block 或 float )，并使用该元素放置绝对定位的内容。
在两个演示中，container2 都是图像的兄弟。一个带有文本内容和黑色背景的小元素绝对定位在 container2 中，以演示将内容放置在图像的右侧。为了使事情更明显，container2 被赋予 10px 的宽度和相同的红色背景，但它在宽度为 0 时工作正常。
关于html - Firefox 不水平扩展包含自动宽度图像的 DIV 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16345105/