我有一个网格,我在其中定位图像,但它们并没有填满给定的全部空间。
我希望下面的图片能很好地说明这个问题。正如我们所看到的,上面的图片和右边的图片并没有填满它们被分配到的行。是什么原因造成的?我该怎么解决?
代码是这样的:
<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%;
}
我该怎么解决?
最佳答案
添加一个div来包装图像,然后将图像样式设置为
.img公司{
最大宽度:100%;
高度:自动
}