Bagaimana untuk mengelakkan elemen yang ditukar daripada terputus secara automatik oleh limpahan?

Question

Saya menggunakan Bootstrap 4 untuk membuat galeri modal untuk tapak web peribadi rakan. Saya menyediakannya supaya imej berkembang pada tuding - tetapi apabila saya menetapkan limpahan kepada auto, ia terputus di tepi modal (atau div). Galeri juga merupakan yang ketiga dalam satu set tab, tetapi kesemuanya berfungsi dengan baik.

Saya telah cuba menukar div mana yang mempunyai kelas overflow-auto Saya telah mencuba menandai semuanya berbeza tetapi tidak kira apa yang saya cuba, saya tidak dapat mengetahui cara membuatnya supaya galeri menatal dan imej saya; jangan tatal pada tuding terputus. Sekarang kod yang berkaitan:

.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>

Jika anda memerlukan maklumat lanjut, sila beritahu saya! Ini kali pertama saya posting di sini :)

Answer 1

Anda perlu menambah padding yang mencukupi pada galeri supaya apabila anda membesarkan imej, terdapat ruang yang cukup untuk versi berskala tanpa sebarang limpahan berlaku.

.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>