I'm struggling with a div that changes in width (col-x) and height (h-100) depending on the browser window size. Inside this div, there is a large image being displayed. The issue I am facing is that while using .img-fluid achieves width constraint based on container size, it does not scale the height proportionally when the container shrinks. Despite trying various combinations of min-height, max-height, object-fit, etc., the image fails to resize correctly along with the container.
To demonstrate my problem, I created a basic plunker where I used vh for the height of the wrapper. The objective is to ensure that both images always remain within the column even as you adjust the browser dimensions for testing.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.sstatic.net/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.sstatic.net/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}