Get original dimensions of resized html image element

Question

Is there a simple and efficient way to get the true dimensions (in JavaScript) of an image that is displayed in an <img> element with a potentially different rendered size (e.g. via max-height or max-width)?

Answer 1

There is present naturalWidth and naturalHeight DOM attributes.

For example:

var image = new Image();
image.src = "test.jpg";
image.onload = function() {
    alert('width - ' + image.naturalWidth);
    alert('height - ' + image.naturalHeight);
}

Or see example on jsFiddle.

More info at MDN