Get full size of image in javascript/jquery

Question

I have an image on page that has been resized to fit in a div, say, 400x300. How can I get the full size of the image (~4000x3000) in jQuery? .width() and .height() only seem to

Answer 1

You can clone the image, remove the height and width attributes, append it to the body and get the width and size before removing it.

jsFiddle demo is here: http://jsfiddle.net/58dA2/

Code is:

$(function() {
   var img = $('#kitteh'); // image selector
   var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    $('#height').text(hiddenImg.height());
    $('#width').text(hiddenImg.width());
    hiddenImg.remove();            
});​