Question

我要创建一个图像网格，其中包含一个大图像和一个大图像右侧的两个小图像，就像这样； screenshot：由于某些原因，这些图像无法填满我的网格项目的整个高度。我发现了一些有关设置“对象适合度：封面；”的建议。在包含图像的网格项目上，但是它不起作用。

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

这是因为图像的高度，或者如果图像的尺寸计算得当，可能是因为您没有将图像设置为显示块。

这是在较大图像上使用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>

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

1 个答案: