How to get the image size (height & width) using JavaScript? Last Updated : 03 Oct, 2024 Comments Improve Suggest changes Like Article Like Report To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access the inner width of an element with this property. This width includes the padding but not the margin and border. Note: Here Element is image, So image.clientHeight and image.clientWidth will be used respectively for getting the height and width of the image. Example: In this example, we will get the image size on a button click. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> getting-height-width-image-using-javascript </title> <style> h1 { text-align: center; letter-spacing: 1px; } img, button { display: block; margin: 0 auto; } button { font-size: large; } </style> </head> <body> <h1> Getting height and width of an image </h1> <br> <br> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-20.png" alt="logo-geeksforgeeks" id="image"> <button type="submit" onclick="myFunc()"> Get height and width </button> <div style="background-color: lightgray"> <div id="height"> </div> <div id="width"> </div> </div> <script> function myFunc() { let image = document.getElementById('image'); let height = document.getElementById('height'); let width = document.getElementById('width'); height.innerHTML += '<h1>height of image is :' + image.clientHeight + 'px </h1>'; width.innerHTML += '<h1>width of image is :' + image.clientWidth + 'px </h1>'; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to get the image size (height & width) using JavaScript? R RishabhkrGoyal Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How To Get The Height And Width Of An Image Using ReactJS? When building web applications, dynamically handling images and their dimensions is a common requirement. In ReactJS, determining the dimensions of an image (i.e., its height and width) can be useful for responsive design, image manipulation, and other dynamic operations. This article will guide you 4 min read How to get the div height using JavaScript ? In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. Method 1: Using the offsetHeight property: The offsetHeight property of an element is a rea 3 min read How to get the Element's Actual Width and Height in JavaScript? In JavaScript, it is often necessary to retrieve the actual width and height of an HTML element. This information can be useful in a variety of scenarios, such as setting the size of an element dynamically, centering an element on the page, or determining the size of an element for animation purpose 5 min read How to calculate Width and Height of the Window using JavaScript ? In this article, we will know to calculate the width & the height of the window using Javascript. Given an HTML document that is running on a Window & we need to find the height and width of the window. The Window innerWidth property is used for returning the width of a window’s content area 2 min read Like