0
votes

L'image chevauche le contenu après le redimensionnement

J'ai essayé de créer une fonction JS qui redimensionne l'image en cliquant dessus. Cela fonctionne mais j'ai un problème avec le contenu qui se chevauche. Après avoir cliqué sur l'image, elle redimensionnera et chevauchera le contenu au-dessus et sous mon image, j'ai essayé de définir la largeur, la hauteur, la position (absolue) mais rien ne fonctionne. Je veux éloigner le contenu de l'image.

<section>
  <h2>HEADING</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget                    auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
  <div class="cool-icon-box">
   <img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
  </div>
</section>

<section>
  <h2>HEADING</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
              
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

#changeImg {
  width: 50%;
  height: 50%;
  padding: 10px;
  margin: 10px;
}

.cool-icon-box {
  width: 100%;
  height: 1000%;
  padding: 10px;
  margin: 10px;
}

let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
  // Set image size to 2 times original
  img.style.transform = "scale(2)";
  // Animation effect
  img.style.transition = "transform 0.25s ease";
}

javascript html css

0 commentaires

3 Réponses :

0
votes

C'est-à-dire que le positionnement par position: relative et les modifications apportées à l'élément par la propriété de transform ne sont appliquées qu'après que l'élément a été inséré dans le DOM.
J'entends par là que les changements visuels des éléments obtenus en utilisant position: relative en combinaison avec les propriétés top , left , right et bottom ainsi qu'en utilisant la propriété transform n'affectent pas la disposition de son parent ou ses frères et sœurs. Ces modifications affectent uniquement l'élément lui-même et ses enfants.

0 commentaires

1
votes

Définissez la transition sur l'élément d'image dans le CSS avec la width comme propriété de transition. Dans votre code, supprimez le paramètre de transition. En cliquant sur l'image, il suffit d'appliquer img.style.width = "100%" .

Le problème avec l'utilisation de l' scale est qu'elle met à l'échelle l'image en place, ainsi, elle peut chevaucher d'autres éléments.

<section>
  <h2>HEADING</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget                    auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
  <div class="cool-icon-box">
   <img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
  </div>
</section>

<section>
  <h2>HEADING</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
              
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

#changeImg {
  width: 50%;
  height: 50%;
  padding: 10px;
  margin: 10px;
  transition:width 0.25s ease;
}

.cool-icon-box {
  width: 100%;
  height: 1000%;
  padding: 10px;
  margin: 10px;
}

let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
  // Set image size to 2 times original
  img.style.width = "100%";
}

0 commentaires

1
votes

La fonction css scale () superposera toujours les éléments voisins. Essaye ça..

let img = document.getElementById("changeImg");
 // Function to increase image size
    function scaleupImg() {
       // Set image size to 2 times original
      img.style = "height:100%;width:100%";
      // Animation effect
      img.style.transition = "transform 0.25s ease";
      }

0 commentaires