具有百分比宽度值的DIV图像包装器的高度错误

Question

我想将图像包装成一个html DIV,因为我希望这个窗口的大小完全可扩展,我想设置DIV百分比的宽度,如下所示:

HTML

<div id="wrapper">
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>

CSS

#wrapper {
    position: absolute;
    width: 50%;
}

#wrapper img {
    width: 100%;
}

图像应确定其容器的高度.这是因为图像宽度设置为100%并且相应地计算图像高度以保持正确的宽高比.

我的问题是:

令人惊讶的是,这种情况发生在Chrome(21.0.1180.89),Firefox(15.0.1)和IE8中,而IE7正确呈现,与图像的高度相匹配DIV.

Answer 1

好吧，摆弄了一下，我找到了一个很好的可能解决方案：

#wrapper img {
    display: block;
    width: 100%;
    border: 1px dashed red;

}

从默认inline显示更改为显示可以立即block消除问题。line-height

这种方法在语义上也是正确的，因为在这种情况下，我们真正想要的是包裹在 a 中的单个图像，其中没有任何其他元素，因此需要通过将图像显示为块来完全消除的DIV概念。line-height