I am having trouble centering an image on the screen and making sure it fits properly without requiring the user to scroll (on screens larger than a tablet).
Here is my desired outcome:
https://i.sstatic.net/LbfV8.png
The top row shows the expected results. The image should always be centered with a small gap at the bottom, regardless of screen size. The bottom row displays my current results. The image is centered on smaller screens but becomes distorted and extends beyond the screen on wider browsers.
I am utilizing Bootstrap. Here is the code I have used:
<div class="container py-3">
<div class="row">
<div class="col-sm-12">
<img src="/images/gallery/inst01.jpg" class="img-fluid d-block rounded">
<i class="fas fa-caret-square-left fa-2x "></i>
</div>
</div>
</div>
I suspect the container's height is causing the issue, or the image is expanding the container beyond the browser window. I am unsure how to limit the container's size or scale down the image to keep it above the bottom of the browser window.
Can anyone provide assistance? Thank you