In some scenario while working with images, we may in need to know the width and height of an image, which may be loaded dynamically or have to access an image already loaded whose size attributes may be unknown.
We can programmatically find/get the Width and Height of an Image using JavaScript easily using the "width" and "height" property.
We can access the image using it's id attribute. If the id attribute is not added to the image tag, first we have to add 'id' attribute to the image. Then we can access the image like this:
var theImg = document.getElementById('our_image_id');
Now we can refer the image using 'theImg' variable.
To get the Width of the image, we can just refer as theImg.width. like that we can do for getting the height.
For Example:
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript">
function getW()
{
var theImg = document.getElementById('testimg');
alert(theImg.width);
}
function getH()
{
var theImg = document.getElementById('testimg');
alert(theImg.height);
}
</script>
</HEAD>
<BODY>
<img id="testimg" src = "palette.gif" border="0"/>
<input type="button" value="get Width" onclick="getW()"/>
<input type="button" value="get Height" onclick="getH()"/>
</BODY>
</HTML>
Output:
If you click on the "get Width" button, you will see the output like this:
Figure 1: Messagebox represent the width of the image.
If you click on the "get Height" button, you will see the output like this:
Figure 2: Messagebox represent the height of the image.