没有滚动条就无法工作

Question

所以我试图让一个模式在主页没有滚动条的情况下工作。模态内部是不同高度的照片。当适合视图高度的照片位于模式内部时，没有滚动条。当它是一个更高的图像时，滚动条就会出现。

我正在努力做到无论照片大小都不会显示滚动条。为了简洁起见，我删除了一些重复的代码。我添加了图片以进行说明。

我试过为不同的属性设置视图高度，但似乎没有任何效果。

modal without scroll bars modal with scroll bars on main window

有人可以帮帮我吗...

<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

感谢@Danield 和他在下面的回答，我得以解决这个问题：

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

.

TL;DR 并编辑为 Bootstrap 5，

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

没有滚动条就无法工作

Can't get modal to work without scroll bars

bootstrap-4

scroll

modal-dialog

bootstrap-modal

scrollbar