引导行超过容器流体的最大高度答案

【问题标题】：Bootstrap row exceeds container-fluid's max-height引导行超过容器流体的最大高度
【发布时间】：2021-01-28 19:39:09
【问题描述】：

我有以下问题，我没有得到引导网格系统的修复。引导版本为 v4.5.2

我在一个工作正常的容器流体上设置了一个最大高度（50vh）。然后我将一行添加到包含 2 列的容器中，但我的图像似乎没有正确调整大小，因为该行只是超过了其父容器的最大高度并调整为图像高度。

您可以在下面看到开发工具图像。我尝试使用“img-fluid”类，但它对我的图像没有任何影响。

This is the child-row that exceeds the container's max-height

我哪里出错了？这是我的代码。

HTML

<div class="container-fluid view ">
    <div class="row h-100 d-flex align-items-center no-gutters">
        <div class="col-md-6 pl-5">
            <h1>Just a simple Heading that should align in the middle</h1>
        </div>
         <div class="col-md-6 d-flex align-items-center img-fluid flex-nowrap overflow-hidden heroImages">
                <img class="img-fluid" src="https://picsum.photos/600">
                <img src="https://picsum.photos/600">
        </div>
    </div>

CSS

html,header{
  height: 100%!important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  color:black;
}

.view {
  max-height: 300px;
 /* max-height: 50vh; */
}

body {
  height: 100% !important;
  padding-top: 55px !important;
  background-color: rgba(255, 255, 255, 0.84) !important;
}

【问题讨论】：

替换动态代码，这样我们就可以得到与图片中完全相同的输出。
@m4n0 现在这样做了。使用相同的高度来重现问题。原始图像高度为 600px。我希望图像缩小到我在父容器上设置的最大高度 50vh。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

尝试将其添加到上面的代码中

.heroImages{
   height: 300px;
   display:flex;
  }
.heroImages img{
  display:block;
  height:100%;
  }

父 div 需要定义高度，并且该 div 内的图像需要显示为块。

【讨论】：