Adjusting Dynamic Image Height & width for all screens

Question

I'm trying set dynamic height & width for images in all screens.

when switching between different screens, it's giving me more space. can we handle those height & width

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

score 0 · Answer 1 · answered Dec 10 '20 at 12:21

You are probably looking for background-size: contain which shows an image at the maximum height and/or width it can achieve within the element's given space rather than have the image shown at its inherent size which is what is happening in the code given in the question, so there's quite a gap in each grid element around the 200x200 images.

See this snippet (go full page):

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

Adjusting Dynamic Image Height & width for all screens

1 Answers1