0

我正在尝试为所有屏幕中的图像设置动态高度和宽度。

在不同屏幕之间切换时，它给了我更多空间。我们可以处理那些高度和宽度吗

移动视图

平板电脑视图

.grid-container{
 width: 70%;
 margin: 90px auto;
}

.box {
height: 275px;
}

//for pic 1
.box1{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
    background-position:center; 
    background-repeat:no-repeat; 
}

//for pic2
.box2{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
    background-position:center; 
    background-repeat:no-repeat; 
}

//for pic3
.box3{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
    background-position:center; 
    background-repeat:no-repeat; 
}

//for pic4
.box4{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
    background-position:center; 
    background-repeat:no-repeat; 
}

.box5{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
    background-position:center; 
    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>

4

1 回答 1

0

您可能正在寻找background-size: contain可以在元素的给定空间内以最大高度和/或宽度显示图像的图像，而不是以固有尺寸显示图像，这是问题中给出的代码中发生的情况，所以有在 200x200 图像周​​围的每个网格元素中存在相当大的差距。

看到这个片段（去整页）：

.grid-container{
 width: 70%;
 margin: 90px auto;
}

.box {
height: 275px;
    background-size: contain;
    background-position:center; 
    background-repeat:no-repeat;
}

.box1{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); 
}

.box2{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); 
}

.box3{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); 
}

.box4{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY"); 
}

.box5{
    background-image:url("https://i.picsum.photos/id/210/200/200.jpg?hmac=ofnpd0LAPvyH0juHuFCaLU6Y6jqJe4qpuc90jXbzUjY");
}

.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>

于 2020-12-10T12:21:42.463 回答