Css 基于容器内部图像的容器高度不正确

正如您在所附的图片中所看到的，

.grid项

div中没有内容的确切高度（在我的例子中是

），但它似乎在底部添加了一些像素

如何告诉

.grid项

div使用其内部图像的确切高度

理想情况下，如果可能的话，我希望保持div的

绝对

和

相对

定位，就像下面的例子一样

HTML结构：

<section>

  <div class="grid-item">
    <div class="item-content">
      <div class="caption">
        <!-- .... -->
      </div>
      <img src="http://placehold.it/700x400/" alt="" />
    </div>
  </div>

</section>

*{
  box-sizing:border-box;
  margin:0;
}

body{
  font: 16px/1.5em sans-serif;
}

img{
  width:100%;
  height:auto;
  position:relative;
}

section{
  max-width:960px;
  margin:0 auto;
}

section .grid-item{
  width:50%;
  float:left;
  padding:20px;
}

section .grid-item .item-content{
  position:relative;
  width:100%;
  overflow:hidden;
}

section .grid-item .item-content .caption{
  position:absolute;
  width:100%;
  height:100%;
  background:#333;
  transform:translateX(-50%);
  z-index:2;
}

-

完整代码：

---

将

display:block

添加到您的

img

规则中：

---

默认情况下，图像是内联的，允许您在文本块中垂直对齐。关键的缺点是，这会导致它们也受到行高、字体大小、字距等的影响。

将

display:block

添加到

img

规则中：

---

默认情况下，图像是内联的，允许您在文本块中垂直对齐。关键的缺点是，这会导致它们也受到行高、字体大小、字距等因素的影响。

我不敢相信事情会这么简单。谢谢你的额外解释！我不敢相信事情竟那么简单。谢谢你的额外解释！