javascript-get-image-dimensions – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Tue, 19 Jun 2012 17:12:14 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 JavaScript Get Image Dimensions (Width & Height) Examples https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/ https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/#respond Tue, 19 Jun 2012 17:12:14 +0000 https://theextremewebdesigns.com/blog/?p=928 Have you ever wanted to get image dimensions using JavaScript? In this article, I am going to share an easy way to use JavaScript to get image dimensions (width & height).

How to use JavaScript to Get Image Dimensions (Width & Height)

Following is the complete HTML + JavaScript source code that shows how to get the image dimensions (width & height) when the page is loaded:

Example: Get Image Width & Height (dimensions) using JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Get Image Dimensions</title>
</head>

<body>

<img src="images/banner.png" id="my_img" />

<script type="text/javascript">

var img = document.getElementById('my_img');

var width = img.clientWidth;

var height = img.clientHeight;

alert( 'Width: ' + width + ' Height:' + height );

</script>
</body>
</html>

The given code assumes that there is an image with ID “my_img” and the dimensions of this image needs to be found. When the above code is executed, the page will alert the width and height of the image.

Note

The image has to be completely loaded in order to get it’s size, or the width & height values are incorrectly shown as zero.

That’s it!

Do you know of any other ways to find image width and height using JavaScript? Feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/feed/ 0 928