无法在 Bootstrap 4 中将图像留在 div 中

Question

我无法让图像符合 div 的大小。我正在使用引导程序 4.1.3。

我正在尝试创建一个具有两个并排列的行，其中一列中包含文本，另一列中包含图像。对于 1366x768 分辨率，我想将行保持在“首屏”，因此我将行限制为 500px 高。问题是我的图像是 344 × 690 并且不会缩小以适应行。它只是溢出顶部和底部。

代码如下：

<div class="special-background">
   <div class="container-fluid">  
      <div class="row py-4 bg-p1" style="height: 500px">
          <div class="col-lg-6 d-flex align-items-center text-white">
            <p class="display-4 pl-4">Lorem ipsum dolor sit amet</p>
          </div>

          <div class="col-lg-6 p-4 d-flex align-items-center">
            <img src="../imgs/image-name.png" class="img-fluid" alt="Responsive image">
          </div>

      </div>
    </div>
</div>

.img-fluid 在 bootstrap 4 中定义如下：

.img-fluid {
max-width: 100%;
height: auto;
}

我尝试将高度更改为 100%，但是在不同的视口尺寸下它会像疯了一样伸展。

Answer 1

由于行的高度是静态的，因此您必须将height: 100% 设置为内部列，然后将max-height: 100% 设置为图像，width: auto 设置为不被拉伸。还将margin: auto 设置为始终居中。

代码：

.special-background .row > div {
 height: 100%;
}

.img-fluid {
 max-heihgt: 100%;
 width: auto;
 margin: auto;
}

Answer 2

隐藏溢出是否适合您的场景？

为overflow-hidden 类创建样式并将其添加到您的列中：

<div class="col-lg-6 p-4 d-flex align-items-center overflow-hidden">
    <img src="../imgs/image-name.png" class="img-fluid" alt="Responsive image">
</div>

还有它的 CSS：

.overflow-hidden {
  overflow: hidden;
}

这将从图像的高度裁剪。 Bootstrap 4.2 中的实用程序类already exists。

---

更新：

若要在不裁剪的情况下以任意尺寸拟合图像，请使用object-fit 属性和max-height。

将img-fluid-height 类添加到您的<img> 标签：

<div class="col-lg-6 p-4 d-flex align-items-center bg-warning">
    <img src="https://via.placeholder.com/344x690/690" class="img-fluid-height" alt="Responsive image">
</div>

并创建它的 CSS 规则集：

.img-fluid-height {
  max-height: 100%;
  object-fit: contain;
}

也可通过this jsfiddle snippet 获得。