在响应式 div 中约束图像（Bootstrap 4）答案

【问题标题】：Constrain image in responsive div (Bootstrap 4)在响应式 div 中约束图像（Bootstrap 4）
【发布时间】：2018-09-28 20:57:45
【问题描述】：

根据浏览器窗口，我的宽度 (col-x) 和高度 (h-100) 会发生变化。在那个 div 里面是一个非常大的图像正在显示。 .img-fluid 的问题在于它仅限制宽度，具体取决于容器。但是当容器 div 的大小缩小时，我需要一个也可以缩放高度的解决方案。但是我还没有找到解决办法。

我尝试了 min-height、max-height、object-fit 等的不同组合，但是当容器变小时（或者当 div 的比例从纵向改变时，图像的宽度总是不会缩小风景它不跟随。

我尝试构建一个基本的 plunker 来演示使用 vh 作为包装器的高度。因此，目标是让两个图像始终保持在列内。你可以试着玩一下浏览器的高宽看看效果。

<div class="wrapper">
  <div class="row h-100">
    <div class="col-4">
      <img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
    </div>
    <div class="col-8">
      <img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
    </div>        
  </div>
</div>

样式：

.wrapper {
  height: 60vh; 
}

https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview

【问题讨论】：

标签： css image bootstrap-4 responsive

【解决方案1】：

添加css高度：100%；图片

【讨论】：