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 [email protected]
Laravel Validation In Bootstrap Model Using Ajax
Today, Laravelcode share with you how to...How to Convert JS Object to JSON String
Use the JSON.stringify() Method You c...How to find mouse position relative to the document using jQuery
Use the jQuery event.pageX and...How to Insert and fetch fullcalendar events from mysql database ?
Hello to all, welcome to therichpost.com...How to Store JavaScript Objects in HTML5 localStorage
Use the JSON.stringify() Method By de...