Bootstrap 3 Aspect ratio on image - html

Question

I am make a banner with Bootstrap 3, but having problems keeping the aspect ratio on the banner image.
When I see the image on small viewports, the image is getting squeezed. Can anybody help me with a solution on this?
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content img {
width: 100%;
height: 80vh;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>

Answer 1

You could use object-fit: cover to have your image fill your available space while maintaining its aspect ratio. You would need to put the 80vh value on the image container.
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content {
height: 80vh;
}
.img-content img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You may want to adjust the banner-content so it lines up better on small screens.

Answer 2

When you set your width and height (by relative) together, you force the image size to change together with your screen. For your text to be not aligned in the centre, is due to your text should be within the same division as your image so that they are able to refer to the same initial point when positioning.
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content > img {
width: 100%;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
</div>