Bootstrap 4：在父 div 中拟合图像内容答案

【问题标题】：Bootstrap 4: fitting image content inside parent divBootstrap 4：在父 div 中拟合图像内容
【发布时间】：2021-04-18 03:58:27
【问题描述】：

使用 Bootstrap 网格，我将整个页面分成两行（25% 高度和 75% 高度）。我喜欢以响应方式将图像包含在前 25% 行中。我喜欢避免设置固定高度，并希望图像占据尽可能多的高度。我已经尝试在类似的先前问题1、2 和3 中遵循大多数答案，但它们都不起作用。

我到目前为止所做的事情：我尝试使用object-fit，但无法让它工作。此外，似乎将父 div 显示属性设置为 flex 是问题所在。但我无法找到替代方案。以下是代码，请在 jsFiddle [link] 中找到 MCVE。

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" 
           class="img-fluid" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

html,body {
  height: 100%;
}

【问题讨论】：

您可以尝试将图片设置为背景图片。

标签： css twitter-bootstrap

【解决方案1】：

我希望这是你所期待的。我已将 h-100classes 添加到 img 标签，并将 h-100 添加到 img parent col 标签

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col h-100">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

.row {
  outline: 3px solid rgba(0, 0, 255, 1);
}

html,
body {
  height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col h-100">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

【讨论】：

谢谢。我只将 h-100 用于 img，否则会丢失纵横比。再次感谢。