Bootstrap 3图像上的纵横比答案

【问题标题】：Bootstrap 3 Aspect ratio on imageBootstrap 3图像上的纵横比
【发布时间】：2021-08-23 17:28:03
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以使用object-fit: cover 让您的图像填充您的可用空间，同时保持其纵横比。您需要将 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>

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

【讨论】：

【解决方案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>

【讨论】：