Question

I am using the following to find the image within .content and apply it’s width to the .project parent width.

    $('.content').find('img').each(function () {
         var $this = $(this), width = $this.width();
         {
            $(this).closest('.project').css("width", width);
        }
    });

My problem is that it doesn’t find the largest image in the .content and sometimes applies a width that is smaller than the largest image and is creating problems with my layout.

Any help would be great. Thanks.

---

Edit

Woops, detail is wrong, the answers are great! I just need to apply the max width the parent project div.

Building off Sudhir’s answer.

This doesn’t work, should it work?

 $(document).ready(function() {
var max_width = 0;
$('.content').find('img').each(function(){
        var this_width = $(this).width();
        if (this_width > max_width) max_width = this_width;
});
$(this).closest('.project').css('width', max_width + 'px');
});

Example of the layout. There are many projects.

<div class="container">

    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />
            <img src="medium.jpg"  height="400" width="600" />

        </div>

        <div class="meta">Other content here.

        </div>
    </div>



    <div class="project">
        <div class="content">
            <img src="small.jpg"  height="100" width="100" />
            <img src="large.jpg"  height="400" width="600" />

       </div>

        <div class="meta">Other content here.

        </div>
    </div>

Answer 1

You can’t do this on document ready event. You have to do this on window load because all images must be loaded to get the dimensions.

$(window).load(function(){
    $('.project').each(function(){
        var maxWidth = 0;
        $(this).find('.content img').each(function(){
            var w = $(this).width();
            if (w > maxWidth) { 
              maxWidth = w;
            }
        });
        if (maxWidth) {
          $(this).css({width:maxWidth});
        }
    });       
});