Making a background image responsive - html

Question

I have the following CSS class.
.img {
background-size: cover;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
color: #fff;
height: 200px;
position: relative;
text-align: center;
width: 100%;
}
What I want to do is the make the height 400px proportionately. (make it responsive for mobile/tablet and desktop)
Currently if I make the height as 400px; The image stretches to right hand side. (in Mobile device screen)
this is how I use it in the code, as a background image
<div class="hero" style="background-image: url('<image path>');">
</div>
So how can I make this background image responsive

Answer 1

To create a ratio-box, you can use padding-top to define the height of the div based as a percentage of the width:
.img {
background-size: cover;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
color: #fff;
height: 75%;
position: relative;
text-align: center;
width: 100%;
}
This creates a 4:3 ratio for the image (which from your comment is what your image should be).
What you need to determine is the ratio of the image, so you can set the proper padding amount.
An important thing to know about using padding-top as a percentage: it refers to the width of the containing block. In your case it won't be an issue, since you're using 100% width anyways, but it's something to keep in mind.
Here is a simple example:
.wrap{
width:50%;
margin:0 auto;
}
.ratio-box{
width:100%;
padding-top:100%;
background:blue;
}
<div class="wrap">
<div class="ratio-box"></div>
<p>1:1 ratio box (resize browser for results)</p>
</div>