Question

Consider this code:

var img = new Image();

img.onload = function() {
    console.log(this.width);
};

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg';

document.body.appendChild(img);

This will print out the image width (800) correctly. But if I apply a max-width using CSS:

img {max-width: 400px}

Test case: http://jsfiddle.net/MSjnM/

The JS code above will print out 400 instead. That is a bit confusing, as one would think that the width attribute represents the original image width, not the computed width.

Now to something even more confusing, if I append the image in the onload event after the width detection I get a different result:

var img = new Image();

img.onload = function() {
    console.log(this.width);
    document.body.appendChild(img);
};

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg';

Test case: http://jsfiddle.net/MSjnM/2/

This will print out 800 instead, even though the CSS has applied. I assume it’s because the image is appended after I detected the width and that the max-width will be applied as soon as the image is inserted into the DOM.

OK, so if I want to get the original image size, no matter when or if the IMG element is inserted in the DOM or whatever CSS styles has been applied, how would I do that fail-safe?

Answer 1

For me:
in IE9, Opera, Safari(PC), FF and chrome the naturalWidth/naturalHeight-properties return the desired values

http://jsfiddle.net/MSjnM/5/