使图像适合 CSS 网格

Question

我有一个网格，我可以在其中放置图像，但它们不会填满给定的整个空间。

我希望下图能够很好地说明问题。正如我们所看到的，顶部图像和右侧图像都没有填充它们分配给的行。是什么原因造成的，我该如何解决？

代码是这样的：

  <section class="wrapper">
   <div class="one">
     <img class="img" src="images/lorem/ipsum.jpg" alt="">
   </div>

   <div class="two">
     <img class="img" src="images/lorem/ipsum2.jpg" alt="">
   </div>

   <div class="three">
     <img class="img" src="images/lorem/ipsum3.jpg" alt="">
   </div>
 </section>

 .wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 20px;
   height: 100vh;
 }

.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
}

.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}

.img {
  width: 100%;
}

我怎样才能解决这个问题？

原文由 Unknown User 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我之前遇到过类似的问题，简单的解决方案是将 img 元素的高度或宽度设置为 100% 以填充其容器。然后设置对象适合属性以覆盖更好的裁剪。您甚至不需要为您的图像使用 div 容器。像这样：

网格容器将负责单元格的定位。

 img{
width: 100%;
height: 100%;
object-fit: cover;
}

原文由 MosDev 发布，翻译遵循 CC BY-SA 4.0 许可协议