Can't get modal to work without scroll bars

Question

So I'm trying to get a modal to work without the main page having scroll bars. Inside the modal are photos with different heights. When a photo that fits within the view height is inside the modal, there are no scroll bars. When it's a taller image, the scroll bars show up.

I'm trying to make it so no scroll bars show up regardless of the size of the photo. I've removed some repetitive code for brevity. I've added pictures for clarification.

I've tried setting a viewheight on different attributes but nothing seems to be working.

modal without scroll bars modal with scroll bars on main window

Can someone please help me out...

<div class="container pt-5 pb-3 galleryContainer" id="gallery">
<div id="carouselGallery" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <a data-bs-toggle="modal" data-bs-target="#galleryModal" data-bs-slide-to="0">
                <img src="img/gallery/01.jpg" class="d-block w-100 galleryImage" alt="...">
            </a>
        </div>
    </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselGallery" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselGallery" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="gallery" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
                <div class="carousel-inner overflow-hidden">
                    <div class="carousel-item active">
                        <img src="img/gallery/01.jpg" class="d-block w-100" alt="">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
            <div class="modal-footer"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button></div>
        </div>
    </div>
</div>

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
.modal-dialog {
    height: calc(99vh-80px);
}
.galleryImage {
    object-fit: cover;
    height: 500px;
}

Answer 1

Thanks to @Danield and his answer below I was able to solve this problem:

https://stackoverflow.com/users/703717/danield

How to limit the height of the modal?.

TL;DR and edited for Bootstrap 5,

.img-fluid {
    max-height: calc(100vh - 225px);
}