I am struggling to create a two-row hierarchy display for a set of photos using bootstrap 5. Despite my efforts, the images overflow out of the container instead of staying within it. My goal is to make the container fill the screen and act as a cover display without requiring the user to scroll. How can I make the images dynamically resize to fit the container?
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b352b37">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="height: 100vh; background-color: yellow;">
<div class="row justify-content-center">
<div class="col col-12 col-md-4">
<img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
</div>
</div>
<div class="row">
<div class="col col-12 col-md-4">
<img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
</div>
<div class="col col-12 col-md-4">
<img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
</div>
<div class="col col-12 col-md-4">
<img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
</div>
</div>
</div>
The images are currently overflowing like this: https://i.sstatic.net/bABWX.png
Instead, I want them to scale down to look like this: https://i.sstatic.net/sKkWU.png
Even after setting a fixed height on the elements, they still occupy the entire screen, as if the height is not defined relative to the container. Is there another method I can use to display the images so that they can dynamically adjust?