时间戳

首页 > 解决方案 > Bootstrap 4：在父 div 中拟合图像内容

css - Bootstrap 4：在父 div 中拟合图像内容

问题描述

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

到目前为止我所做的：我尝试使用object-fit，但无法让它工作。此外，设置为的父 div 显示属性似乎flex也是问题所在。但我无法找到替代方案。下面是代码，也请在 jsFiddle [链接]中找到 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%;
}

标签： csstwitter-bootstrap

解决方案

我希望这是你所期待的。我已将h-100类添加到 img 标签和h-100img 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>

推荐阅读