CSS Grid - 如何获取图像以填充网格项空间[重复]

Question

这个问题在这里已有答案：

• Mystery white space underneath image tag [duplicate] 3回答

我正在建立一个响应式3x3网格，到目前为止这就是我所拥有的：

您会注意到，这会在调整大小时保持网格项中包含的每个图像的宽高比，并保持3x3网格（这是所需的）。

.people-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  position: relative;
  display:block;
  background-size:cover;
  border:1px solid red;
}

.grid-item img {
  width:100%;
}

.grid-item-inner {
  position: absolute;
  top:0;
  margin:15px;
  bottom:0;
  width: 90%;
  background:#fdfdfd;
  border:1px solid #78a7d7;
  opacity:0.8;
}

http://jsfiddle.net/3r80vyhn/

但是我不能为我的生活弄清楚如何摆脱图像底部的额外间距。 （狗的底部和红色边框之间的白色空间）。我可以使用其他网格属性来帮助解决这个问题吗？

我是一个CSS网格新手，所以如果有其他方法可以实现这一点，我愿意接受建议。

Answer 1

是吗？

.people-grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  position: relative;
  display:block;
  border:1px solid red;
  width:100%;
  height:100%;
}

.grid-item img {
  width:100%;
  height:100%;
}

.grid-item-inner {
  position: absolute;
  top:0;
  margin:15px;
  bottom:0;
  width: 90%;
  background:#fdfdfd;
  border:1px solid #78a7d7;
  opacity:0.8;
}

<div class="people-grid-container">


    <div class="people-grid">

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
        <img src="https://placeimg.com/376/379/animals">
        <div class="grid-item-inner">
          <p>sample</p>
        </div>
      </a>

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
        <img src="https://placeimg.com/376/379/animals">
        <div class="grid-item-inner">
          <p>sample</p>
        </div>
      </a>

      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
        <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
      <a href="" class="grid-item">
          <img src="https://placeimg.com/376/379/animals">
          <div class="grid-item-inner">
            <p>sample</p>
          </div>
      </a>
    </div>

</div>