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

Question

我想将图像包装到 htmlDIV中，并且由于我希望它可以完全随窗口大小缩放，因此我想将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比内部图像高 5 像素？
我怎样才能摆脱这个 5px 的差距，同时仍然以百分比设置所有大小并且不使用 javascript？

令人惊讶的是，这发生在 Chrome (21.0.1180.89)、Firefox (15.0.1) 和 IE8 中，而 IE7 正确呈现它，DIV使图像的高度与图像的高度相匹配。

score 2 · Accepted Answer

看一下这个：

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;
}

我使用 box-sizing 来确保图像的宽度不会溢出容器

score 1 · Accepted Answer

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

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

}

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

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

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

score 1 · Accepted Answer

......

嗨，现在添加vertical-align:top你的img tagthrow css

像这样

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

现场演示

score 0 · Accepted Answer

您的问题是图像 -<img>确切地说是标签 - 是一个内联元素。您需要做的就是display: block在图像上设置，多余的填充就会消失。演示。

score 0 · Accepted Answer

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

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

演示

score 0 · Accepted Answer

我认为是因为它看不到表格

我在您的代码中添加了 display:table

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

示例显示表

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

6 回答 6

Related

Reference