Is there any way to read out the "naturalWidth" of an image with jquery?

Question

I tried with something like this:

var Height = $(this).naturalHeight;

But it doesn't work. Is there any way to do that

greez

Answer 1

$this.css('height', 'auto');
var height = $this.height();

Answer 2

The best you can do is to hide an image without setting the width and height and use the image source for this image as your original image. Then calculate the dimension of this hidden image.

Or else you can calculate the physical dimension in server side and pass that to a hidden element in the page and fetch the size from that hidden element value.

Answer 3

One way to get the dimensions of an image is to dynamically load a copy of the image using javascript and obtain it's dimensions:

// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
    alert('height: ' + img.height);
    alert('width: ' + img.width);
    // garbage collect img
    delete img;
}).error(function () {
    // image couldnt be loaded
    alert('An error occurred and your image could not be loaded.  Please try again.');
}).attr({ src: imgSrc });

Answer 4

It looks to me like the accepted solution modifies the appearance of the object. Occasionally jQuery is a little too helpful and you have to tell it to get out of your way. If you want to use naturalWidth or naturalHeight then just use the one that already exists by converting the jQuery object into a native browser element reference.

var Height = document.getElementById($(this).attr("id")).naturalHeight;