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

Question

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

Here is a plunkr example

img {
    width: 100%;
}

CSS

npm install --production

如果您检查父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>

Answer 2

备选方案1

在display: block上设置<img>，就像@Pete演示一样。这可能是首选的解决方案。

#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>

备选方案2

通过设置#parent或line-height: 0，删除font-size:0上的空格。

#parent {
  border: 1px solid black;
  line-height: 0;
}

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

备选方案3

添加负边距。这是一个相当糟糕的解决方案，但我相信值得一提。

#parent {
  border: 1px solid black;
}
#parent > img {
  width:100%;
  margin-bottom: -4px;
}

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

Answer 3

就像皮特说的那样。将display:block添加到#parent > img。 Img默认是一个内联块元素。