css - 如何让包含和图像元素的 div 具有与图像相同的高度

Question

我有这个 html 代码：

<div>
    <img src="http://placehold.it/319x300" alt="">
<div>

这个CSS：

*{margin: 0; padding: 0;}
div{
    background: red;
    width: 319px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
}

div但是底部显示的背景颜色。有没有办法使容器与图像的高度相同？在我正在处理的网站上，我有 Eric 重置样式，也没有padding或margin与此冲突。这是示例代码http://jsfiddle.net/ESmZW/1/ 谢谢

Answer 1

一种快速的方法是将vertical-align:top属性添加到图像

img{
    width: 100%;
    height: auto;
    vertical-align:top;
}

jsFiddle 示例

您还可以将图像向左浮动并将溢出：自动规则添加到 div 中，就像在这个jsFiddle 示例中一样。

Answer 2

在图像上设置“显示：块”。

img {
    width: 100%;
    height: auto;
    display: block;
}

Answer 3

您可以使用绝对/相对定位：

*{margin: 0; padding: 0;}
div{
    position:relative;
    background: red;
    width: 319px;
    height: auto;
}
img{
    position:absolute;
    width: 100%;
    height: auto;
}

Answer 4

@aurel 如果您只想让 div 成为图像的大小，为什么不将它的高度和宽度设置为图像的大小？您的 HTML 也不会关闭您的 div。请参阅我对jsfiddle的修改。

<div>
    <img src="http://placehold.it/319x300" width="319" height="300" alt="">
</div>

body {
    margin:0;
}


div {
    background: red;
    width: 319px;
    height: 300px;
}