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

【问题标题】：Wrong height of DIV image wrapper with percentage width values具有百分比宽度值的 DIV 图像包装器高度错误
【发布时间】：2017-04-03 06:47:16
【问题描述】：

我想将图像包装到 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 渲染为比内部图像高 5 像素？
我怎样才能摆脱这个 5px 的差距，同时仍然以百分比和使用 javascript 设置所有尺寸？

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

【问题讨论】：

5 个不同的答案都有效！！！
确实！谢谢大家，我想这只是一个人现在更喜欢什么的问题。
我认为你应该在垂直对齐和行高之间结合起来。这些是最语义化（如果我可以说）的解决方案

标签： css html image

【解决方案1】：

看看这个：

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 来确保图像的宽度不会溢出容器

【讨论】：

【解决方案2】：

.......

您好，现在在您的 img tag 中添加 vertical-align:top throw css

像这样

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

live demo

【讨论】：

这个工作...检查我的解决方案我经历了不同的方法！
@AhmadAlfy 你曾经使用过边框很好的例子，但它只适用于最新的浏览器，这是 css3 部分............
我只在演示中使用了border-box。

【解决方案3】：

好的，折腾一下，我找到了一个很好的可能的解决方案：

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

}

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

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

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

【讨论】：

【解决方案4】：

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

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

DEMO

【讨论】：

它可以工作，但我需要更改 HTML 以解决与样式相关的问题，而不仅仅是 CSS。

【解决方案5】：

我认为是因为它不像表格

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

现在看起来不错，检查链接

Example Display Table

【讨论】：

这在 IE8 上不起作用。此外，将图像显示为表格在语义上是不正确的。显示成块会好很多，IE也支持。

【解决方案6】：

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

【讨论】：

谢谢，这与我在回答中得出的结论相同。