我有两个容器的标记。第一个设置为“位置:绝对”,所有 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;
}
谢谢,
丹尼尔