我正在使用 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>
如果需要更多信息,請告訴我!這是我第一次在這裡發文:)
您需要在圖庫中添加足夠的填充,以便在放大圖像時,有足夠的空間容納縮放後的版本,而不會發生任何溢出。