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="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

Answer 1

添加CSS高度：100％；图片

响应div中的约束图像（Bootstrap 4）

1 个答案: