可以在没有滚动条的情况下获得模态工作

Question

因此，我试图在没有滚动条的主页的情况下进行模态工作。模式内的是高度不同的照片。当适合视图高度内的照片在模态内部时，没有滚动条。当它是更高的图像时，滚动条出现。

我正在尝试使它做到，因此无论照片的大小如何，都不会出现滚动条。我已经删除了一些重复的代码，以简短。我添加了图片以进行澄清。

我已经尝试对不同属性设置视线，但似乎没有任何作用。

不带滚动条 主窗口上带有滚动条的模态

有人可以帮我帮助我...

<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：//stackoverflow.com/users/703717/danield < /a>

如何限制模态的高度？ 。

tl; dr并编辑为Bootstrap 5，

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