Answer: Use the JavaScript width и height property

You can use either width or height JavaScript property to proportionally increase и decrease the dimension of an image like zoom-in и zoom-out feature.

Let’s take a look at the following example to understи how it basically works:

Пример

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>JavaScript Increasing и Decreasing Image Size</title>
  • <script>
  •     function zoomin(){
  •         var myImg = document.getElementById("sky");
  •         var currWidth = myImg.clientWidth;
  •         if(currWidth == 500){
  •             alert("Maximum zoom-in level reached.");
  •         } else{
  •             myImg.style.width = (currWidth + 50) + "px";
  •         } 
  •     }
  •     function zoomout(){
  •         var myImg = document.getElementById("sky");
  •         var currWidth = myImg.clientWidth;
  •         if(currWidth == 50){
  •             alert("Maximum zoom-out level reached.");
  •         } else{
  •             myImg.style.width = (currWidth - 50) + "px";
  •         }
  •     }
  • </script>
  • </head>
  • <body>
  •     <p>
  •         <button type="button" onclick="zoomin()">Zoom In</button>
  •         <button type="button" onclick="zoomout()">Zoom Out</button>
  •     </p>
  •     <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
  • </body>
  • </html>

Here are some more FAQ related to this topic:

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.