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:

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

Похожие посты

Как сделать паузу при выполнении скрипта в JavaScript

Вы можете просто использовать метод setTimeout(), чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды). Давайте посмотрим следующий пример, чтобы понять, как это работает: Как вы заметили в предыдущем примере, JS-код после метода setTimeout() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все…

Как перебрать массив в JavaScript

Самый простой способ перебрать массив в JavaScript — использовать цикл for. В следующем примере показано, как вывести все значения массива в JavaScript по очереди. В качестве альтернативы вы можете использовать недавно представленный цикл for-of в ES6 для итерации по массиву, например: См. Руководство по ES6-функциям JavaScript, чтобы узнать о новых функциях, представленных в ES6.

Как создавать многострочные строки в JavaScript

Вы можете использовать конкатенацию строк (с помощью оператора +) для создания многострочной строки. В следующем примере показано, как динамически составлять некоторый контент HTML в JavaScript, используя конкатенацию строк, и печатать его на веб-странице. Есть даже лучший способ сделать это. Начиная с ES6, вы можете очень легко использовать шаблонные литералы для создания многострочных строк. В шаблонных…

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

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

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

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