Html 使图像适合CSS网格

我有一个网格，我在其中定位图像，但它们并没有填满给定的整个空间

我希望下面的图片能够很好地说明这个问题。正如我们可以看到的一样，上面的图像和右边的图像都没有填充指定给它们的行。这是什么原因造成的？我如何修复它

代码是这样的：

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

.包装纸{
显示：网格；
网格模板列：重复（8，1fr）；
网格自动行：最小最大值（150px，自动）；
栅隙：20px；
高度：100vh；
}
.一{
网格柱：2/7；
网格行：1/3；
}
.二{
网格柱：2/5；
网格行：3/4；
} 
.三{
网格柱：5/7；
网格行：3/4；
}
.img{
宽度：100%；
}

---

如何修复此问题？

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

解决这个常见问题的一个好方法是将图像设置为网格中div中的CSS背景参数，而不是html中的

标记，例如background:url（“”），并使用

background size:cover在同一元素上

这样，图片将填充所有属于它的空间。
尝试背景大小：100%100%和背景大小：cover或fit
添加一个div来包装图像，然后将图像样式设置为
.img{
最大宽度：100%；
高度：自动
}
您应该包含HTML，以便我们可以重现问题。这些帖子可能会有帮助：也许150px的最小最大值设置太多了？你能用你的HTML结构和图片大小来说明你的问题吗。。。也许它也与HTML有关？@G-Cyr我确实添加了HTML。Yan建议的修复可以解决间隙的问题，但现在当我调整图像大小时，你可以看到图像的剪切效果（与背景大小类似）。问题是，要使图像填充整个单元格网格，您必须切断部分图像或拉伸图像。如果一开始他们的尺寸不合适。你想拉伸吗？不，我不想拉伸。他们应该保持他们的纵横比。谢谢你的链接！好的，谢谢你的帮助。我很惊讶。这是解决CSS网格中所需图像问题的唯一方法吗？“fit-content:cover”与背景图像类似，但img objectsdid是指。div name img{width:100%；height:100%；}HTML（带有CSS网格区域）：CSS:graph{网格区域：图形；边框：2px实心暗绿色；填充：2px；显示：块；对象拟合：覆盖；}.img{最大宽度：100%；高度：自动