make image fit to division in responsive way

Question

I'm trying to fit the whole image into the division and want to make it responsive using media queries. the main aim was to fit the image inside the container without stretching the image and the image should be fit within the div tag. so even if we stretch the screen the image should be responsive within container and even i shrink the screen it should be responsive within container.

i've been trying it in multiple ways. my final code is

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

Answer 1

Please try the following css

img {
max-width:100%;
height:auto;

}