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 回答