Comment agrandir ou diminuer une image en JavaScript

Vous pouvez utiliser la propriété width ou height de JavaScript pour agrandir ou diminuer proportionnellement les dimensions d’une image, comme les fonctions de zoom avant et arrière.
 
 

Code HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Agrandir ou diminuer une image en JavaScript</title>
    <script type="text/javascript">
		// Mettez le code javascript ici.
    </script>
  </head>
  <body>
    <img src="https://via.placeholder.com/300" id="myImg">
    <p>
      <button type="button" onclick="agrandir()">+ Agrandir</button>
      <button type="button" onclick="diminuer()">- Diminuer</button>
    </p>
  </body>
</html>

 

Code JavaScript:
function agrandir() {
    var myImg = document.getElementById("myImg");
    var width = myImg.clientWidth;
    if (width == 600) {
        alert("Vous avez atteint le niveau de zoom maximal.");
    } else {
        myImg.style.width = (width + 20) + "px";
    }
}

function diminuer() {
    var myImg = document.getElementById("myImg");
    var width = myImg.clientWidth;
    if (width == 40) {
        alert("Vous avez atteint le niveau de zoom minimal.");
    } else {
        myImg.style.width = (width - 20) + "px";
    }
}
Résultat
Agrandir ou diminuer une image en JavaScript

Comment modifier la taille d'une image en JavaScript

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *