Get actual image size, after resizing it

Question

I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it's true sizes.

Currently, I have to manually create an array that includes the actual height of all images. For solving a design issue+less manual operation of my gallery, I need to get the actual height of an image, after I resized it (CSS).

I tried:

var imageheight = document.getElementById(imageid).height;

And:

var imageheight = $('#' + imageid).height();

But both return the 150px attribute assigned with the CSS. How can I solve this? Thanks

possible duplicate of http://stackoverflow.com/questions/7682772/get-image-size-after-resize-javascript — NullPoiиteя, May 07 '12 at 08:06
So you are loading all the full size images instead of making proper thumbnails? Ouch... — Guffa, May 07 '12 at 08:17
I'm loading the full size image, and showing it when a thumbnail is being clicked. — Novak, May 07 '12 at 08:43

score 29 · Answer 1 · answered May 07 '12 at 11:40

29

you have the 'natural' kws to help you out:

with js:

var imageheight = document.getElementById(imageid).naturalHeight;

or with jquery

var imageheight = $('#' + imageid).naturalHeight;

answered May 07 '12 at 11:40

Dinesh Gajbhiye

674
4
7

2

for IE9+ and any other major browser, these properties are valid. This is a good answer! Someone probably wrapped a jQuery plugin for this. If not, this might be interesting to have. – Yanick Rochon May 14 '14 at 18:33

Joseph · Accepted Answer · 2012-05-07T08:10:51.493

One way you could do it is create a separate image object.

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

That way, you'll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.

Anupam · Answer 3 · 2020-03-09T10:19:23.823

@Dinesh's answer to just use the naturalHeight and naturalWidth property is great and probably should be the accepted answer.

Just wanted to add two things here that could save people hours since I see many SO posts around this issue and have myself spent quite sometime on it.

naturalHeight may return 0 or undefined if called before the image is loaded. Just setting src attribute may not mean that the image is loaded immediately. I have seen that it is best to fetch it in onload.
```
$('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}
```
If not using this, just $('selector').naturalHeight may not work. You may need to access the associated DOM element i.e $('selector')[0].naturalHeight or $('selector').get(0).naturalHeight since we are using native Javascript's attribute naturalHeight. See this SO post for more details.

I spent hours wondering why `naturalWidth` returned `undefined`, now I know why (+1). — Jose Manuel Abarca Rodríguez, Aug 18 '20 at 15:20

Get actual image size, after resizing it

3 Answers3

Linked