How to stop background image from contracting on resizing - html

Question

So i have a div with a background image with background size set to cover.
Here is the div code:
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url('https://dummyimage.com/800x680/ccc/333');
background-position: 50% 25%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: .25rem;
}
#media screen and (max-width:650px) {
.imgContainer {
width: 100% !important;
}
}
<div class="imgContainer"></div>
The background shows the image completely but since i am making my site responsive, i change the div on width 650px using the #media rule.
#media screen and (max-width:650px){
.imgContainer {
width: 100% !important;
}
}
When the div is enlarged, the background-image widens and don't show much content of the image. The image's content is shown completely when the width is 400px and height 340px. The problem occurs when the div's width is 100% and the image's content does not show as much as it shows when it is 400px wide. How to fix this?
And thanks in advance!

Answer 1

With background-size: cover you're telling the browser to ensure that the image covers the entirety of the element while maintaining the image's original aspect-ratio. So it is to be expected that changing the aspect ratio of the HTML element will cut off some of the image to make this happen.
In order to make your image responsive you'll have to ensure that the aspect-ratio of your image remains the same.
One way to do this is to use something like the following:
#media screen and (max-width:650px) {
.imgContainer {
width: 100%;
padding-bottom: 85%;
height: auto;
}
}
This will set the padding to be 85% of the width of the element as 100 / (400/340) = 85. Assuming nothing else is in your div this will give it the appropriate aspect ratio for your image.

Answer 2

This might help.
Notice: It only works, if the image has an aspect ratio of 400:340 (e.g. 800 x 680, 600 x 510, etc.)
Notice: The 418 pixel in the last media query is an empirical value based on the current paddings and margin. You might need a different value.
Here is the codepen to see in in action
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url("https://dummyimage.com/800x680/ccc/333");
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
border-radius: 0.25rem;
}
#media screen and (max-width: 650px) {
.imgContainer {
width: 100% !important;
background-size: contain;
}
}
#media screen and (max-width: 418px) {
.imgContainer {
background-size: cover;
}
}
<div class="imgContainer"></div>