Get the original dimensions of a modified html image element

Is there a simple and efficient way to get the true dimensions (in JavaScript) of an image that is rendered in an element <img>

with potentially different render sizes (e.g. via max-height

or max-width



source to share

1 answer

Attributes naturalWidth

and naturalHeight

DOM are present here .

For example:

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


Or see an example on jsFiddle.

More information on MDN



All Articles