Question

我在获取符合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>

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

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

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

Answer 1

隐藏溢出是否适合您的情况？

为类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中也可用。

Answer 2

由于行的高度是静态的，因此必须将ifelse(c(70:80) <= 75, 0.793, 0.956)设置为内部cols，然后将# [1] 0.793 0.793 0.793 0.793 0.793 0.793 0.956 0.956 0.956 0.956 0.956设置为图像，将height: 100%设置为不拉伸。还要将max-height: 100%设置为始终居中。

代码：

width: auto

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

2 个答案: