Question

我有两个容器的标记。第一个设置为“position：absolute”，所有4个“坐标”在整个站点上展开（left = right = bottom = top = 30px）。

在该容器内部是另一个容器，其高度设置为“100％”和“display：inline-block”（“inline-block”，因为第二个容器应该水平扩展到所需的宽度）。

第二个容器内部是一个图像，其高度设置为“100％”，宽度设置为“自动”，因此图像总是和两个容器一样高，但仍然具有正确的比例。

我需要第二个容器，因为我想在这个容器中放置一些绝对定位元素，以便始终显示在图像的右侧。

问题如下：在Firefox中，第二个容器不会随图像的自动宽度水平增长/扩展。它保持在图像的原始宽度。在Safari / Chrome中没有问题，只有Firefox。

在这里你可以找到一个例子 - 小提琴：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;
}

感谢，

丹尼尔

Answer 1

收缩包裹流体图像

此问题的一个版本也出现在IE10，Chrome和Safari中。如果图像部分透明，则更明显，如modified demo中所示。第一次加载页面时，container2的大小与预期一致，但如果调整浏览器大小，则会保持其初始宽度。

Opera的行为与Firefox相同。

似乎容器2的收缩包装（其宽度仅为满足其内容所需的宽度）在某种程度上取决于具有用于子内容的已知宽度。对于Firefox和Opera，当为子图像提供width:auto时，它使用图像的自然宽度，而不管实际的缩放宽度。收缩包装容器2时，其他浏览器能够计算显示宽度，但只有在页面首次加载时才会这样做;之后，继续使用初始计算的值。

简而言之，Firefox和Opera从不执行宽度计算。其他浏览器仅在首次加载页面时执行，而不是在重新调整浏览器大小时执行。

解决方法

似乎没有一种明显的方法可以强制浏览器对子图像执行宽度计算;但是，如果需要container2的唯一原因是绝对在图像的右侧放置其他内容，那么还有另一种方法可以实现这一点：

不是在图像周围收缩包装容器，而是将元素放在它旁边（inline-block或浮动），并使用该元素放置绝对定位的内容。

在这两个演示中，container2是图像的兄弟。带有文本内容和黑色背景的小元素绝对位于container2中，以演示将内容放置在图像的右侧。为了使事情更加明显，container2的宽度为10px，红色背景相同，但宽度为0时工作正常。

Answer 2

只需删除<img>标记中的宽度声明。

Answer 3

如果容器的宽度小于图像的宽度

，则

修复非常简单

.element:after {
    color: transparent;
    content: "a";
}

Firefox不会水平扩展包含具有自动宽度的图像的DIV容器

3 个答案:

收缩包裹流体图像

解决方法