火狐浏览器无法水平扩展包含自适应宽度图片的DIV容器

Question

火狐浏览器无法水平扩展包含自适应宽度图片的DIV容器

htmlcssfirefoxfluid-images

3

我有一个标记，其中包含两个容器。第一个容器设置为“position:absolute”，并将所有四个“坐标”扩展到整个站点（left=right=bottom=top=30px）。

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

在第二个容器内部有一张图片，其高度设置为“100％”，宽度设置为“auto”，以便图像始终与两个容器一样高，并且比例正确。

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

问题如下：在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;
}

感谢您，丹尼尔。

IT技术翻译：

感谢您，丹尼尔。

- user1254824

您可以在 https://bugzilla.mozilla.org/enter_bug.cgi 提交错误报告。 - ChrisW

3个回答

0

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

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

- dsl400

0

只需在<img>标签中删除宽度声明即可。

- emijayne

谢谢，但这并不起作用。原始代码中甚至没有它。我只是添加它来帮助Firefox计算图像比例。 - user1254824

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Coughlin · Accepted Answer

缩小包装流体图像

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

Opera与Firefox的行为相同。

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

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

解决方法

似乎没有明显的方法可以强制浏览器为子图像执行宽度计算；但是，如果container2唯一的原因是绝对定位其他内容在图像的右侧，则有另一种方法可以实现此目的：

不要将容器缩小包装在图像周围，而是放置一个与之并列的元素（inline-block或浮动），并使用该元素放置绝对定位的内容。

在两个演示中，container2是图像的兄弟。在container2中绝对定位了具有文本内容和黑色背景的小元素，以演示将内容放置在图像右侧的效果。为了使事情更加明显，container2被赋予10px的宽度和相同的红色背景，但它也可以使用0的宽度。