How to get the image size (height & width) using JavaScript ?
Last Updated :
15 Apr, 2019
For getting size of an image (height and width), Element.clientHeight and Element.clientWidth properties is used.
-
Element.clientHeight: We can access the inner height of an element with this property. This height include the padding but not the margin and border.
-
Element.clientWidth: We can access the inner width of an element with this property. This width include 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 height and width of the image.
Example: Getting image size.
<!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 =
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 >
</ body >
< script >
function myFunc() {
let image = document.getElementById('image');
let height = document.getElementById('height');
var 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 >
</ html >
|
Output:
After clicking on the button:
After clicking on the button:
Share your thoughts in the comments
Please Login to comment...