我正在尝试将整个图像放入分区中,并希望使用媒体查询使其响应。主要目的是在不拉伸图像的情况下将图像放入容器内,并且图像应该适合 div 标签。因此,即使我们拉伸屏幕,图像也应该在容器内响应,即使我缩小屏幕,它也应该在容器内响应。
我一直在尝试多种方式。我的最终代码是
.grid-container{
width: 70%;
margin: 90px auto;
}
.box {
height: 200px;
width: 100%;
min-height: 200px;
position: relative;
}
.box1{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
height: 100%;
position:relative;
background-size: cover;
background-position: center;
}
.box2{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
opacity: 1;
background-position:contain;
background-repeat:no-repeat;
}
.box3{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
opacity: 1;
background-position:contain;
background-repeat:no-repeat;
}
.box4{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
opacity: 1;
background-position:contain;
background-repeat:no-repeat;
}
.box5{
background: transparent url('https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY') no-repeat;
opacity: 1;
background-position:contain;
background-repeat:no-repeat;
}
.sub-con {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
@media only screen and (max-width: 1000px) {
.sub-con {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 700px) {
.sub-con {
grid-template-columns: 1fr;
}
}
<div class="grid-container">
<div class="sub-con">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
<div class="box4 box"></div>
<div class="box5 box"></div>
</div>
</div>