Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I'd recommend using an image's onload event. Here's a quick example:

var img = $("img")[0]; // Get my img elemvar pic_real_width, pic_real_height;$("<img/>") // Make in memory copy of image to avoid css issues    .attr("src", $(img).attr("src"))    .load(function() {        pic_real_width = this.width;   // Note: $(this).width() will not        pic_real_height = this.height; // work for in memory images.    });

To avoid any of the effects CSS might have on the image's dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

You can also use the naturalHeight and naturalWidth HTML5 attributes.

Use the naturalHeight and naturalWidth attributes from HTML5.

For example:

var h = document.querySelector('img').naturalHeight;

Works in IE9+, Chrome, Firefox, Safari and Opera (stats).

function getOriginalWidthOfImg(img_element) {    var t = new Image();    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;    return t.width;}

You don't need to remove style from the image or image dimensions attributes. Just create an element with javascript and get the created object width.