jquery – How to get image size (height & width) using JavaScript?

jquery – How to get image size (height & width) using JavaScript?

You can programmatically get the image and check the dimensions using Javascript…

const img = new Image();
img.onload = function() {
  alert(this.width + x + this.height);
}
img.src = http://www.google.com/intl/en_ALL/images/logo.gif;

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

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;

jquery – How to get image size (height & width) using JavaScript?

Also (in addition to Rex and Ians answers) there is:

imageElement.naturalHeight

and

imageElement.naturalWidth

These provide the height and width of the image file itself (rather than just the image element).

Leave a Reply

Your email address will not be published.