CSS网格，有网格项的图像填充高度吗？

Question

我想创建一个图像网格，其中包含一张大图像和大图像右侧的两个小图像，如下所示； screenshot : 由于某种原因，图像不会填充我的网格元素的整个高度。我发现了一些涉及设置“object-fit: cover;”的建议在包含图像的网格项上，但它不起作用。

HTML:

<div class="proj-grid">
    <div class="featured"><img src="images/grid_test.png" alt=""></div>
    <div class="mini1"><img src="images/grid_test.png" alt=""></div>
    <div class="mini2"><img src="images/grid_test.png" alt=""></div>
</div>

CSS:

.proj-grid {
  display: grid;

  grid-template-areas:
    "featured featured mini1"
    "featured featured mini2";

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
}
.featured {
  grid-area: featured;
}

.mini1 {
  grid-area: mini1;
}

.mini2 {
  grid-area: mini2;
}

我在这里缺少什么？ 谢谢!

Answer 1

它要么是图像的高度，要么是(如果图像的大小经过适当计算)，因为您没有将图像设置为 display: block;。

这是一个在较大图像上使用 overflow:hidden; 来保持宽高比的工作示例。

.proj-grid {
  display: grid;

  grid-template-areas:
    "featured featured mini1"
    "featured featured mini2";

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
}

.featured {
  grid-area: featured;
  overflow: hidden;
}

.mini1 {
  grid-area: mini1;
}

.mini2 {
  grid-area: mini2;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

<div class="proj-grid">
    <div class="featured"><img src="https://via.placeholder.com/300x150" alt=""></div>
    <div class="mini1"><img src="https://via.placeholder.com/300x150" alt=""></div>
    <div class="mini2"><img src="https://via.placeholder.com/300x150" alt=""></div>
</div>