使图像适合 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%;
}

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

Answer 1

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

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

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

Answer 2

添加一个 div 来包裹你的图片，然后将图片样式设置为 .img { max-width: 100%; 高度：自动 }

Answer 3

这是正常现象，因为图像会保留其纵横比。

解决这个常见问题的一个好方法是将图像设置为网格中 div 中的 CSS 背景参数，而不是<img>html 中的标签，例如 background: url(' http://link-to-your-image /image.jpg ') 并background-size: cover;在同一元素上使用。

这样，图片将填充所有属于它的空间。