我正在使用 Bootstrap 4 为朋友的个人网站制作一个模态画廊。我设置了它，以便图像在悬停时展开 - 但当我将溢出设置为自动时，它们会在模态（或 div）的边缘被切断。图库也是一组选项卡中的第三个，但所有这些都很好用。
我尝试更改哪个div具有overflow-auto类；我尝试过标记各种不同的标记，但无论我尝试什么，我都不知道如何制作它，以便图库滚动并且让我的图像在悬停时不会被切断。现在是相关代码：
.gallery {
overflow:visible !important;
z-index:999;
}
.gallery-img {
background-color:#ffeaf2;
height:10rem;
margin-left:0.5rem;
margin-top:0.5rem;
padding:0.3rem;
transition: transform .5s;
width:auto;
}
.gallery-img:hover {
box-shadow: 0 0 3px 3px #ffeaf2;
transform: scale(2);
z-index:999;
}
<div class="tab-pane container fade overflow-auto" id="memart" style="margin-top:-24rem; height:23rem">
<div class="row ml-2">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="gallery">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329856_TuDnR2FzlveInTq.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329876_O85sZH316z1NQQz.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56330075_hjGCrMrZI3dFtcT.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/62146009_V0BKO0RXTJLZdTT.png" class="gallery-img">
</div>
</div>
</div>
如果需要更多信息，请告诉我！这是我第一次在这里发帖:)
您需要向图库添加足够的填充，以便在放大图像时，有足够的空间容纳缩放后的版本，而不会发生任何溢出。
.gallery { padding: 3rem; overflow: auto; height: 300px; border: 1px solid red; } .gallery-img { background-color: #ffeaf2; height: 10rem; margin-left: 0.5rem; margin-top: 0.5rem; padding: 0.3rem; transition: transform .5s; width: auto; } .gallery-img:hover { box-shadow: 0 0 3px 3px #ffeaf2; transform: scale(1.5); }<div class="tab-pane container fade overflow-auto" id="memart"> <div class="row ml-2"> <h1>Gallery</h1> </div> <div class="row"> <div class="gallery"> <img src="https://picsum.photos/id/217/300" class="gallery-img"> <img src="https://picsum.photos/id/218/300" class="gallery-img"> <img src="https://picsum.photos/id/219/300" class="gallery-img"> <img src="https://picsum.photos/id/220/300" class="gallery-img"> </div> </div> </div>