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()

Answer 3

You could use the jQuery .height() and .width() methods, as these return the computed width and height. You should always include the width and height attributes in your img tags however, as some browsers will not render these images correctly without them.

Answer 4

Sure, use the height method to get the size of the img tags.

http://api.jquery.com/height/