Get image size with Jquery

Question

I have a list of images

<img src="001.jpg"> 
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">

Each image is 200px wide but the heights are different. Is there a way with Jquery to find, and then set the height of each image after they load?

I plan on having dozens of images on a single page and don't want to add the width and height attribute to every single image tag.

I am using the Masonry Plugin and it requires a width and height attribute for images.

Answer 1

I believe this will do what you want:

$('img').each(function() {
    $(this).attr('height',$(this).height());
    $(this).attr('width',$(this).width());
});

You will probably also want to add a class="masonry" attribute to each img as well and then make your selector $('img.masonry').

Answer 2

You could try:

$('img').each(
    function(){
        var height = $(this).height();
        var width = $(this).width();

        $(this).attr({'height': height, 'width': width});
    })

Assuming that you want the height/width attributes to be set to the img's actual height/width, rather than scaled/modified in some manner.

References:

• height()
• width()