html - 父 div 高度不适合子图像高度

Question

这可能是一个非常简单的问题，但我不知道如何使父 div 元素的高度与子图像高度相同。

Here is a plunkr example

<div id="parent">
    <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

CSS

img {
    width: 100%;
}

如果您检查父级 div，您会发现它的高度比子图像的高。提前致谢。

Answer 1

你需要给图片一个 display:block 的样式，否则你会得到底部的空隙:

#parent {
  border: 1px solid black
}
#parent > img {
  display: block;
  width:100%;
}

<div id="parent">
  <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>