国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何讓轉(zhuǎn)換后的元素不被溢出自動(dòng)切斷?
P粉242535777
P粉242535777 2023-09-07 20:04:02
0
1
719

我正在使用 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ā)帖:)

P粉242535777
P粉242535777

全部回復(fù)(1)
P粉797004644

您需要向圖庫(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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板