jQuery
jQuery Get Image Dimensions (Width & Height) Examples
Working with images could be tough & time consuming, especially when you do not know your way around dealing with them. In this article, I am going to share an easy way to use jQuery to get image dimensions (width & height).
How to use jQuery to Get Image Dimensions (Width & Height)
Following is the complete HTML + jQuery source code that shows how to get image width & height when the page is loaded:
Example: Get Image Width & Height (dimensions) using jQuery when page loads
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Get Image Dimensions</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
</head>
<body>
<img src="images/banner.png" id="my_img" />
<script type="text/javascript">
$(document).ready(function() {
$("#my_img").load(function() {
var width = $(this).width();
var height = $(this).height() ;
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.
That’s it!
Do you know of any other ways to find image width and height using jQuery? Feel free to share by commenting below.