Get the height of a hidden image

Question

I've read multiple posts on this, and even found a plugin (http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/), but still didn't fix my problem.

I need to get the actual height and width of an image, before it's displayed on the front end.

I've tried so many things, I really don't want to show it, then figure it out, then hide it again and then later show it. It doesn't seem practical, I was wondering if anyone has found any solutions?

I've tried:

$('img').get(0).clientWidth;
$('img').get(0).naturalWidth;
$('img').get(0).width;
$('img').get(0).offsetWidth;
$('img').get(0).width();

No luck with either of these, I did try the above with height as well.

The image DOESN"T have the height and width attributes set manually.

Shannon

http://stackoverflow.com/questions/2395931/how-do-i-get-actual-image-width-and-height-using-jquery I think this will help you — Doan Cuong, May 07 '13 at 07:29
I think [this](http://stackoverflow.com/questions/3761061/get-height-of-image-inside-a-hidden-div) might help you — StackOverflowUser, May 07 '13 at 07:33

Juan Mendes · Answer 1 · 2013-05-07T15:56:28.340

4

Nothing with display:none has dimensions. If you need it measurable but hidden, use

visibility: hidden

It will also take space in the flow of the document. If you don't want that, you can temporarily change its position to absolute.

edited May 07 '13 at 15:56

answered May 07 '13 at 07:42

Juan Mendes

80,964
26
138
189

I didn't want to 'hide and show it', I thought the has to be a better option, but thankyou. – Shannon Hochkins May 08 '13 at 01:20
@ShannonHochkins You have to render an image to get its dimensions in JS, no getting around that... At least this renders it in a way that doesn't disrupt the flow – Juan Mendes May 08 '13 at 05:16

Matt · Answer 2 · 2013-05-07T07:49:57.157

The easiest way to achieve what you want is to append this images to the DOM hidden with CSS as the default style:

visibility: hidden

I like to use Jquery ImagesLoaded Plugin to determine when the images are ready like so:

//container holding your images
$('.photos').imagesLoaded(function () {
    //Function to measure size

    //Take measurements
    var w = $('img').width();
    var h = $('img').height();

    //Once you know the proper size, show it
    $('img').show();              
});

score 0 · Answer 3 · answered May 07 '13 at 07:42

0

Hey You can get Height and width from Jquery . I have made demo for you.

$(this).height();
$(this).width();

Please refer link

Demo

answered May 07 '13 at 07:42

Neeraj Dubey

4,193
7
25
47

Height and width is specifically set in it's attributes, I don't have access to inline styles sorry. – Shannon Hochkins May 08 '13 at 01:16

score 0 · Answer 4 · edited May 23 '17 at 10:25

0

you don't need to use extra plugin just use new version of jQuery after 1.4.4
```
 $('img').width();
 $('img').height();
```
this problem actually refer to position look here :
jQuery: Get height of hidden element in jQuery
solved in newer version in jquery look here : Hidden div height (changing my advice)

edited May 23 '17 at 10:25

Community

1
1

answered May 07 '13 at 07:44

ahmed alnahas

263
1
4

I didn't want to 'hide and show' it, as mentioned in my description. But thankyou. – Shannon Hochkins May 08 '13 at 01:18

score 0 · Answer 5 · answered Jan 28 '15 at 10:17

In many cases you have to know the size of an image that is into a hidden element. It can be the image itself or a far parent.

I did this method to know wich one is on display : none;

function findHiddenParent(element)
{
    if (element.parent().is(':hidden'))
    {
        return findHiddenParent(element.parent());
    }
    else
    {
        return element;
    }
 }

And I use it that way :

if (img.is(':hidden'))
{
    hiddenParent = findHiddenParent(img);
    hiddenParent.show().css('visibility','hidden');
}
//Get width and height from img (that is a var getted from a jQuery selector

//When things done with width and height
if (hiddenParent != undefined)
{
    hiddenParent.css('visibility','visible').hide();
}

score -1 · Accepted Answer · answered May 08 '13 at 02:09

Seeing as there's really only two options that I can see:

Cloneing the item, position it so that it's invisible to the user then get it's dimensions.
Visually hide it, but keep it's presence in the DOM and get it's dimensions from there.

Both aren't great solutions, but to anyone who would like to use it:

HTML:

<img id="hidden" src="http://www.shannonhochkins.com/_images/513330a8965f59b83a00034d" />

CSS:

#hidden {display:none; margin:10px;}

JAVASCRIPT:

$.fn.actual = function(type, includeMargin){
    var elem = $(this),
        unit = 0;
        includeMargin = (includeMargin ? true : false);
    elem.css({position: 'absolute', visibility: 'visible', display: 'block'});
    switch(type) {
        case 'height':
            unit = elem.height();
        break;
        case 'width':
            unit = elem.width();
        break; 
        case 'outerHeight':
            unit = elem.outerHeight(includeMargin);
        break;
        case 'outerWidth':
            unit = elem.outerWidth(includeMargin);
        break;  
        case 'innerWidth':
            unit = elem.innerWidth(includeMargin);
        break;   
        case 'innerHeight':
            unit = elem.innerHeight(includeMargin);
        break;             
    }
    elem.css({position: 'static', visibility: 'visible', display: 'none' });
    return unit;
};

var height = $('#hidden').actual('height');
var width = $('#hidden').actual('outerWidth', true);
alert('Width: ' + width + ' height: ' + height);

DEMO:

http://jsfiddle.net/bXG5n/

Shannon

Weird that you unaccepted my answer, accepted your own 6 months later, even without any upvotes. Specially when it doesn't add much to what I had already said. — Juan Mendes, Dec 10 '13 at 17:56
I expanded on the answer to make it easier for others so they have working code when/if they stumble on this. — Shannon Hochkins, Dec 18 '13 at 04:36
Well...this should not be accepted cause it returns 0 for all options. — HellBaby, Mar 06 '15 at 10:22

Get the height of a hidden image

6 Answers6