2

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

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

第二个容器内部是一个高度设置为“100%”、宽度设置为“自动”的图像，因此图像始终与两个容器一样高，并且仍然具有正确的比例。

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

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

在这里您可以找到一个示例小提琴：http: //jsfiddle.net/EGRCQ/ 第一个容器是蓝色的。在此您将找到第二个容器（红色），并在此容器内找到示例图像。如果您将输出窗口的高度降低到 180 像素以下，您将看到问题（红色容器变得可见），或者您只需使用 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;
}

谢谢，

丹尼尔

4

3 回答 3

4

收缩包装流体图像

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

Opera 的行为与 Firefox 相同。

似乎 container2 的收缩包装（它的宽度仅大到适合其内容所需的大小）在某种程度上取决于具有可用于子内容的已知宽度。对于 Firefox 和 Opera，当给定子width:auto图像时，它使用图像的自然宽度，而不考虑实际的缩放宽度。其他浏览器能够在收缩包装容器2时计算显示宽度，但它们仅在页面首次加载时才这样做；之后，继续使用最初计算的值。

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

解决方法

似乎没有一种明显的方法可以强制浏览器为子图像执行宽度计算；但是，如果需要 container2 的唯一原因是将其他内容绝对定位在图像的右侧，那么还有另一种方法可以完成此操作：

与其在图像周围收缩包装容器，不如在其旁边放置一个元素（inline-block或浮动），并使用该元素来放置绝对定位的内容。

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

于 2013-05-02T22:54:40.827 回答
0

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

于 2013-05-02T18:43:12.913 回答
0

如果容器的宽度小于图像的宽度，则修复非常简单

.element:after {
    color: transparent;
    content: "a";
}
于 2013-06-10T11:08:56.053 回答