Comment éviter que les éléments convertis soient automatiquement coupés par débordement ?

Question

J'utilise Bootstrap 4 pour créer une galerie modale pour le site Web personnel d'un ami. Je l'ai configuré pour que les images se développent au survol - mais lorsque je règle le débordement sur auto, elles sont coupées au bord du modal (ou div). La Galerie est également le troisième d'une série d'onglets, mais tous fonctionnent très bien.

J'ai essayé de changer quel div a la classe overflow-auto ; j'ai essayé de tout marquer différemment mais peu importe ce que j'essaye, je n'arrive pas à comprendre comment faire en sorte que la galerie défile et que mes images ne pas faire défiler en survol est coupé. Maintenant le code correspondant :

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

Si vous avez besoin de plus d'informations, n'hésitez pas à me le faire savoir ! C'est la première fois que je poste ici :)

Answer 1

Vous devez ajouter suffisamment de remplissage à la galerie pour que lorsque vous agrandissez l'image, il y ait suffisamment de place pour la version mise à l'échelle sans qu'aucun débordement ne se produise.

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