How to increase and decrease image size using JavaScript

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() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все…

Подробнее

22 декабря, 2019
115

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

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

Подробнее

8 декабря, 2019
99

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

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

Подробнее

How to increase and decrease image size using JavaScript

Answer: Use the JavaScript width и height property

Пример

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

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

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

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

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

Answer: Use the JavaScript width и height property

Пример

Related FAQ

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

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

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

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

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