I'm still learning the ropes of bootstrap. I have a bootstrap 4 page with three columns, and in the middle column, there's a container housing 4 images in a grid format. My goal is to have this container take up as much space as possible on larger screens while maintaining the aspect ratio of the images inside. Currently, I've been experimenting with manually setting the column width (e.g., col-lg-5), but it's hit or miss depending on the screen's aspect ratio. The auto-width option results in either the image container not filling the entire height or overflowing outside the view. Setting the height of the image container to 100% using max-height: 100vh; seemed promising, but the rows within the container didn't scale accordingly and instead overflowed vertically.
For reference, here's an example:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto" style="background-color:red;">
<h2>Column 1</h2>
</div>
<!-- I want the content in this column to take up 100% height on large screens, but 100% width on small screens (columns stack) -->
<div class="col-auto" style="background-color:green;">
<h2>Column 2</h2>
<div id="img-container" class="container" style="max-height:100vh;">
<div class="row">
<div class="col p-0">
<img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
</div>
<div class="col p-0">
<img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
</div>
</div>
<div class="row">
<div class="col p-0">
<img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
</div>
<div class="col p-0">
<img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
</div>
</div>
</div>
</div>
<div class="col-auto" style="background-color:blue;">
<h2>Column 3</h2>
</div>
</div>
</div>
Current: https://i.sstatic.net/stGpX.png Currently, the images are overflowing the container, and I can't seem to find the right solution for proper scaling.
Desired outcome: https://i.sstatic.net/PwLPR.png I aim for the image container to always fill 100% height with automatic width until all available space is utilized on the sides. On smaller screens, the three columns should stack vertically, with column 2 occupying 100% width.