Wie kann verhindert werden, dass die konvertierten Elemente durch Überlauf automatisch abgeschnitten werden?

Question

Ich verwende Bootstrap 4, um eine modale Galerie für die persönliche Website eines Freundes zu erstellen. Ich habe es so eingerichtet, dass die Bilder beim Schweben erweitert werden. Wenn ich den Überlauf jedoch auf „Auto“ stelle, werden sie am Rand des Modals (oder Div) abgeschnitten. Die Galerie ist auch die dritte in einer Reihe von Registerkarten, aber alle funktionieren großartig.

Ich habe versucht, das Div mit der Overflow-Auto-Klasse zu ändern. Ich habe versucht, alles anders zu markieren, aber egal, was ich versuche, ich finde nicht heraus, wie ich dafür sorgen kann, dass die Galerie scrollt und meine Bilder angezeigt werden Beim Hover nicht scrollen ist abgeschnitten. Nun der entsprechende Code:

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

Wenn Sie weitere Informationen benötigen, lassen Sie es mich bitte wissen! Das ist das erste Mal, dass ich hier poste :)

Answer 1

您需要向图库添加足够的填充，以便在放大图像时，有足够的空间容纳缩放后的版本，而不会发生任何溢出。

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