How to get current image size (width and height) using JavaScript
Today we will show you how to get current image size (width and height) using JavaScript.
Checkout more articles on JavaScript
You can simply use the clientWidth and clientHeight to get the current width and height of the image in pixel.
Refer to the sample HTML code below to get the image size.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to get current image size (width and height) using JavaScript - Clue Mediator</title> <script> function getImgSize(){ var myImg = document.querySelector("#myImage"); var currWidth = myImg.clientWidth; var currHeight = myImg.clientHeight; console.log("Image width: ", currWidth); console.log("Image height: ", currHeight); } </script> </head> <body> <img src="/my-img.jpg" id="myImage" width="250" alt="My Image"> <button type="button" onclick="getImgSize();">Click to get Image Size</button> </body> </html> |
Using the code above you will find the width and height of the current image in the console.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
