Bootstrap 4 Can'；在引导程序4中，无法使映像停留在div内

我在获取符合分区大小的图像时遇到问题。我使用的是Bootstrap 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>

---

我曾尝试将高度更改为100%，但在不同的视口大小下，它会疯狂地拉伸

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

创建类

溢出隐藏的样式并将其添加到列中：

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

这将从图像的高度进行裁剪。Bootstrap4.2中的实用程序类


更新：

要在不裁剪图像的情况下以任意大小拟合图像，请使用
对象拟合
属性以及
最大高度

将
img流体高度
等级添加到您的
标签：

也可在中使用。
因为行具有静态高度，所以必须将
高度：100%
设置为内部列，然后将
最大高度：100%
设置为图像，将
宽度：自动设置为不拉伸。还将
margin:auto
设置为始终居中

代码：

不幸的是，我需要显示整个图像：/@spikem我已经添加了一个解决方案来实现这一点。请让我们知道这是否适合你。@ Spkimm如果这修正了你的问题，请把答案标记为正确和投票。顺便说一句，落选的选民也可以重新考虑他的投票。
<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>

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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