CSS网格-如何获取图像以填充网格项目空间

Question

我正在构建一个自适应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>