我正在尝试制作小网格图像 . 在桌面上我想要每列3个图像,在移动设备上每列需要2个图像 . 这样做我没有问题 . 当我将页面大小缩小到移动大小时,问题就开始了 . 图像按正确顺序排列,但它们不缩小,它们保持原始尺寸,右边的图像从网格中出来(你看不到它的一半) . 我尝试了最大宽度:100%,宽度:100%等 . 没有工作 .
.sponsors1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media(max-width:768px) {
.sponsors1 {
grid-template-columns: 1fr 1fr;
justify-self: center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items: center;
overflow:
}
.img1 {
justify-self: center;
}
.img2 {
justify-self: center;
}
.img3 {
justify-self: center;
}
}
<div class="sponsors1">
<a href="#/" class="img1"><img src="images/#.png" alt=""></a>
<a href="#" class="img2"><img src="images/#.jpg" alt=""></a>
<a href="#" class="img3"><img src="images/#.png" alt=""></a>
</div>
1 回答
您应该将图像容器的
justify-self
属性设置为stretch
,然后将图像's (NOT their containers')设置为100%
.