Bootstrap 3 图片的纵横比

Question

我正在用 Bootstrap 3 制作横幅，但在保持横幅图片的纵横比方面遇到问题。

当我在小视口上看到图像时，图像被挤压了。谁能帮我解决这个问题？

<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

您可以使用 object-fit: cover 让您的图像填充您可用的 space，同时保持其宽高比。您需要将 80vh 值放在图像容器上。

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

您可能需要调整横幅内容，使其在小屏幕上排列得更好。

Answer 2

当您同时设置宽度和高度（相对）时，您会强制图像大小随屏幕一起更改。你的文字没有居中对齐，是因为你的文字应该和你的图片在同一个分区内，这样它们在定位时可以参考相同的初始点。

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

Bootstrap 3 图片的纵横比

Bootstrap 3 Aspect ratio on image

html

css

twitter-bootstrap-3