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

Mumas 发表于 Dev

妈妈

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

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

我在这里想念什么？谢谢！

杰克

它是图像的高度，或者是（如果图像的尺寸是经过适当计算的）（因为未将图像设置为）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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。