CODEWITHSUNDEEP
javascriptimagehtml
devios1
devios1

Reputation: 38025

Get original dimensions of resized html image element

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)?

Upvotes: 7

Views: 13737

Answers (1)

antyrat
antyrat

Reputation: 27765

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

Upvotes: 32

Related Questions