How to zoom-in and zoom-out image using JavaScript ?
Given an image and the task is to increase and decrease the image size using JavaScript. Use the following property to increase and decrease the image.
Using Width property: It is used to change the new values to resize the width of the element.
Syntax:
object.style.width = "auto|length|%|initial|inherit"
Approach:
- Get the selector of the required image using .getElementById(selector).
- Store the current width value in the variable using .clientWidth.
- Now change the width value to new using .style.width.
- It will proportionally increase and decrease the dimension of an image.
Example:
<!DOCTYPE html> < html > < head > < title > How to zoom-in and zoom-out image using JavaScript ? </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h3 > JavaScript | Increase and Decrease image size </ h3 > < hr > < div class = "box" > < img src = id = "geeks" GFG = "250" alt = "Geeksforgeeks" > </ div > < hr > < button type = "button" onclick = "zoomin()" > Zoom-In </ button > < button type = "button" onclick = "zoomout()" > Zoom-Out </ button > < script type = "text/javascript" > function zoomin() { var GFG = document.getElementById("geeks"); var currWidth = GFG.clientWidth; GFG.style.width = (currWidth + 100) + "px"; } function zoomout() { var GFG = document.getElementById("geeks"); var currWidth = GFG.clientWidth; GFG.style.width = (currWidth - 100) + "px"; } </ script > </ body > </ html > |
Output:
- Before click on button:
- After click on Zoom-In Button:
- After click on Zoom-Out Button:
Using Height property: It is used to change the new values to resize the height of the element.
Syntax:
object.style.height = "auto|length|%|initial|inherit"
Approach:
- Get the selector of the required image using .getElementById(selector).
- Store the current height value in the variable using .clientHeight.
- Now change the width value to new using .style.height.
- It will proportionally increase and decrease the dimension of an image.
Example:
<!DOCTYPE html> < html > < head > < title > How to zoom-in and zoom-out image using JavaScript ? </ title > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h3 > JavaScript | Increase and Decrease image size </ h3 > < hr > < div class = "box" > < img src = id = "geeks" GFG = "250" alt = "Geeksforgeeks" > </ div > < hr > < button type = "button" onclick = "zoomin()" > Zoom-In </ button > < button type = "button" onclick = "zoomout()" > Zoom-Out </ button > < script type = "text/javascript" > function zoomin() { var GFG = document.getElementById("geeks"); var currHeight = GFG.clientHeight; GFG.style.height = (currHeight + 40) + "px"; } function zoomout() { var GFG = document.getElementById("geeks"); var currHeight = GFG.clientHeight; GFG.style.height = (currHeight - 40) + "px"; } </ script > </ body > </ html > |
Output:
- Before click on button:
- After click on Zoom-In Button:
- After click on Zoom-Out Button:
Please Login to comment...