How to get image size (height & width) using javascript?

ClientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image var img = document. GetElementById('imageid'); //or however you get a handle to the IMG var width = img.

ClientWidth; var height = img.clientHeight.

ClientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image. Var img = document.

GetElementById('imageid'); //or however you get a handle to the IMG var width = img. ClientWidth; var height = img.clientHeight.

4 This just gets the dimensions of an element, not of an image... – Nicky De Maeyer Aug 31 at 14:29 @Nicky exactly right. It gives the dimensions of the image as it is rendered in that instance. – Rex M Sep 1 at 9:33.

You can programmatically get the image and check the dimensions using Javascript... var img = new Image(); img. Onload = function() { alert(this. Width + 'x' + this.

Height); } img. Src = '

'; This can be useful if the image is not a part of the markup.

1 I just tried this in Firefox4, it will output 0x0. – runrunforest Mar 2 at 18:58 @runrunforest Try now. Thanks :) – Josh Stodola Mar 2 at 21:05.

Using JQuery you do this: var imgWidth = $("#imgIDWhatever").width().

Also (in addition to Rex and Ian's answers) there is imageElement. NaturalHeight and imageElement. NaturalWidth which provide the heigh and width of the image itself (rather than the image element).

3 These are FF only. – Jourkey Sep 15 '09 at 0:09 1 Chromium too (as of now) – Manuel Mar 31 at 18:27 1 @Jourkey: they've been in webkit (and so Safari, Chrome, Epiphany, and most mobile browsers...) for a long time – olliej Mar 31 at 20:16.

The thing all other have forgot is that you cant check image size before it loads. When the author checks all of posted methods it will work probably only on localhost. Since jQuery could be used here, remember that 'ready' event is fired before images are loaded.

$('#xxx').width() and .height() should be fired in onload event or later.

Post some updated code, you may get upvoted and even get a coveted reversal badge! – James Westgate Jun 2 at 9:31.

You can only really do this using a callback of the load event as the size of the image is not known until it has actually finished loading. Something like the code below... var imgTesting = new Image(); function CreateDelegate(contextObject, delegateMethod) { return function() { return delegateMethod. Apply(contextObject, arguments); } } function imgTesting_onload() { alert(this.

Width + " by " + this. Height); } imgTesting. Onload = CreateDelegate(imgTesting, imgTesting_onload); imgTesting.

Src = 'yourimage.jpg.

If you are using jQuery and you are requesting image sizes you have to wait until they load or you will only get zeroes. $(document). Ready(function() { $("img").

Load(function() { alert($(this).height()); alert($(this).width()); }); }).

Ok guys, I think I improved the source code to be able to let the image load before trying to find out its properties, otherwise it will display '0 * 0', because the next statement would have been called before the file was loaded into the browser. Requires jquery... function getImgSize(imgSrc){ var newImg = new Image(); newImg. Src = imgSrc; var height = newImg.

Height; var width = newImg. Width; p = $(newImg). Ready(function(){ return {width: newImg.

Width, height: newImg. Height}; }); alert (p0'width'+" "+p0'height'); }.

You can also use var image=document. GetElementById("imageID"); var width=image. OffsetWidth; var height=image.offsetHeight.

JQuery Answer: $height = $('#image_id'). Attr('height'); $width = $('#image_id'). Attr('width').

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions