width
and height
propertyYou can use either width
or height
JavaScript property to proportionally increase and decrease the dimension of an image like zoom-in and zoom-out feature.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and 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>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
How to Append Values to an Array in JavaScript
Use the push() Method You can simply...Django - How to send an email with Example
Django comes with a yare and facile-to-u...How to refresh a page with jQuery
Use the JavaScript location.reload() Met...How to Scroll to the Top of the Page Using jQuery/JavaScript
Use the scrollTop Property You can us...Create a Chart using chartJs in VueJs
This tutorial expounds about how to enge...