css - 在响应式 div 中限制图像(Bootstrap 4)

Question

我有一个根据浏览器窗口改变宽度 (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="/image/2OrtT.jpg" class="img-fluid" />
    </div>
    <div class="col-8">
      <img src="/image/2OrtT.jpg" class="img-fluid" />
    </div>        
  </div>
</div>

样式:

.wrapper {
  height: 60vh; 
}

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

Answer 1

添加CSS高度:100%；图片