jQuery: get image height, assign to image

Question

This sounds simple enough, but so far I have been unable to solve it. I have a large number of images that for various reasons need to have their height explicitly defined. Assuming no two images have the same height, what would be the best way to find the height of each individual image within div.column and then assign the height as a parameter to the corresponding image?

HTML

<div class="column">
    <ul>    
        <li><img alt="Logo" src="images/logos1.jpg /></li>
        <li><img alt="Logo" src="images/logos2.jpg /></li>
        <li><img alt="Logo" src="images/logos3.jpg /></li>
        <li><img alt="Logo" src="images/logos4.jpg /></li>
        <li><img alt="Logo" src="images/logos5.jpg /></li>
        <li><img alt="Logo" src="images/logos6.jpg /></li>
    </ul>
</div>

<div class="column">
    <ul>    
        <li><img alt="Icon" src="images/icon1.jpg /></li>
        <li><img alt="Icon" src="images/icon2.jpg /></li>
        <li><img alt="Icon" src="images/icon3.jpg /></li>
        <li><img alt="Icon" src="images/icon4.jpg /></li>
        <li><img alt="Icon" src="images/icon5.jpg /></li>
        <li><img alt="Icon" src="images/icon6.jpg /></li>
    </ul>
</div>

will all the images have the same height? or will each have a different height? — Rooster, Dec 01 '11 at 23:29
do you know the image height for all images beforehand? is the height variable between different images? — lunixbochs, Dec 01 '11 at 23:30
The images all have varying heights and may be different each time you load the page. — colindunn, Dec 01 '11 at 23:30
Sorry if that was unclear. I just edited, hopefully it makes sense now. — colindunn, Dec 01 '11 at 23:33
Ok... readed again. You want that the image has: `style="height:NNpx"` ?? — Roko C. Buljan, Dec 01 '11 at 23:36
http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome — ncank, Dec 01 '11 at 23:37

marcio · Accepted Answer · 2011-12-02T00:03:16.617

1

Maybe the best way to do it:

$('div.column img').each(function(){
    var image = $(this);
    var realHeight = image.attr("naturalHeight");
    image.attr('height', realHeight);
});

The trick is to access the naturalHeight property instead of access CSS rules.

edited Dec 02 '11 at 00:03

answered Dec 01 '11 at 23:51

marcio

10,002
11
54
83

jQuery: get image height, assign to image

1 Answers1