Use the JQuery inbuilt functions :
$(<image selector>).height() to calculate the height of the image.
$(<image selector>).width() to calculate the width of the image.
Here <image selector> is the selector of image, you can select the image by its tag,id, class etc.
for ex,
you can select an image by its id (use #)
$('#imgdesert').height()
you can select an image by its class (use dot '.')
$('.myimage').height()
<script type="text/javascript">
$(window).load(function () {
$('#imageheightwidth').html(
"Image height: " + $('#imgdesert').height() + " <br/> Image width: " + $('#imgdesert').width()
);
});
</script>
<body>
<label id="imageheightwidth" class="myimage"></label><br />
<img id="imgdesert" src="Desert.jpg" />
</body>
Output:
Image height: 700
Image Width : 800
Notes: if you calculate the Image height & width in $(document).ready event , you will get the Image's height and width both Zero.
Reason is $(document).ready event fires before the image fully loaded and find no image when calculate the dimensions and will show default value i.e 0
Output:
Image height: 700
Image Width : 800
Notes: if you calculate the Image height & width in $(document).ready event , you will get the Image's height and width both Zero.
Reason is $(document).ready event fires before the image fully loaded and find no image when calculate the dimensions and will show default value i.e 0
No comments:
Post a Comment