我正在使用 Bootstrap 4 為朋友的個(gè)人網(wǎng)站制作一個(gè)模態(tài)畫(huà)廊。我設(shè)置了它,以便圖像在懸停時(shí)展開(kāi) - 但當(dāng)我將溢出設(shè)置為自動(dòng)時(shí),它們會(huì)在模態(tài)(或 div)的邊緣被切斷。圖庫(kù)也是一組選項(xiàng)卡中的第三個(gè),但所有這些都很好用。
我嘗試更改哪個(gè)div具有overflow-auto類(lèi);我嘗試過(guò)標(biāo)記各種不同的標(biāo)記,但無(wú)論我嘗試什么,我都不知道如何制作它,以便圖庫(kù)滾動(dòng)并且讓我的圖像在懸停時(shí)不會(huì)被切斷?,F(xiàn)在是相關(guān)代碼:
.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>
如果需要更多信息,請(qǐng)告訴我!這是我第一次在這里發(fā)帖:)
您需要向圖庫(kù)添加足夠的填充,以便在放大圖像時(shí),有足夠的空間容納縮放后的版本,而不會(huì)發(fā)生任何溢出。
.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>