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

Question

Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page?

Answer 1

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.

Answer 2

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;