CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
McDuck4
McDuck4

Reputation: 662

Bootstrap 3 Aspect ratio on image

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>

Upvotes: 0

Views: 800

Answers (2)

Yeong Jong Lim
Yeong Jong Lim

Reputation: 258

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>

Upvotes: 1

Rich DeBourke
Rich DeBourke

Reputation: 3423

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.

Upvotes: 3

Related Questions