I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the image is located) 100% of that height. However, even though the backdrop now matches the set height, the image still extends beyond the container.
Check out the jsfiddle example here.
.modal-content {
max-height: 85vh;
}
.modal-content>.modal-body {
max-height: 100%;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04666b6b70777076657444312a352a37">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header text-center">
<h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
<p class="modalText text-dark text-center mt-2">image description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>