根据其中的图像，容器高度不正确

Question

正如您在附图中看到的那样，.grid-item div没有内容的确切高度（在我的例子中是<img>），但它似乎添加了一些底部的像素。

如何告诉.grid-item div使用其中图像的确切高度？

理想情况下，如果有可能，我希望保留absolute和relative 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>

CSS：

*{
  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;
}

-

完整代码： http://codepen.io/anon/pen/zrydZX?editors=1100

Answer 1

将display:block添加到您的img规则：http://codepen.io/anon/pen/qbLXxd?editors=1100

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