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％，并相应地计算图像高度，保持正确的宽高比。

结果在jsfiddle：http://jsfiddle.net/lorenzopolidori/5BN4g/15/

上可见

我的问题是：

为什么所有现代浏览器都会使包装器DIV比内部图像高5px？
我如何摆脱这个5px的差距，同时仍然设置所有尺寸的百分比和没有使用javascript？

令人惊讶的是，这种情况发生在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问题。

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

适用于所有主流浏览器：http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

................

您好现在在vertical-align:top throw css

中添加img tag

就像这样

#wrapper img {
    width: 100%;
    border: 1px dashed red;
    vertical-align:top; // add this line
}

live demo

Answer 3

检查出来：

http://jsfiddle.net/5BN4g/29/

这是一个行高问题： - ）

你需要：

#wrapper {
    width: 60%;
    background-color: #aaa;
    margin: 50px auto;
    line-height:0;
}

#wrapper img {
    width:100%;
    border: 1px dashed red;
    box-sizing:border-box;
}

我使用了盒子大小来确保图像的宽度不会溢出容器

Answer 4

我认为您应该设置align属性以强制浏览器正确显示img标记。

<div id="wrapper">
  <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>

DEMO

Answer 5

我认为是因为它看不到表

我在你的代码中添加了display：table

现在看起来很好，请查看链接

Example Display Table

Answer 6

您的问题是图像 - 确切地说是<img>标记 - 是内联元素。您需要做的就是在图像上设置display: block，并且额外的填充消失。 Demo

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

6 个答案: