我有一个网格,我在其中定位图像,但它们并没有填满给定的全部空间。
我希望下面的图片能很好地说明这个问题。正如我们所看到的,上面的图片和右边的图片并没有填满它们被分配到的行。是什么原因造成的?我该怎么解决?
代码是这样的:

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

html - 使图像适合CSS网格-LMLPHP
我该怎么解决?

最佳答案

添加一个div来包装图像,然后将图像样式设置为
.img公司{
最大宽度:100%;
高度:自动
}

09-10 11:02
查看更多