title: Find largest image
body: <p>I am using the following to find the image within <code>.content</code> and apply it's width to the <code>.project</code> parent width. </p>
  
  <pre><code>    $('.content').find('img').each(function () {
           var $this = $(this), width = $this.width();
           {
              $(this).closest('.project').css("width", width);
          }
      });
  </code></pre>
  
  <p>My problem is that it doesn't find the <em>largest</em> image in the <code>.content</code> and sometimes applies a width that is smaller than the largest image and is creating problems with my layout.</p>
  
  <p>Any help would be great. Thanks.</p>
  
  <hr>
  
  <p><em>Edit</em> </p>
  
  <p>Woops, <em>detail</em> is wrong, the answers are great! I just need to apply the max width the parent <code>project</code> div. </p>
  
  <p>Building off Sudhir's answer. </p>
  
  <p>This doesn't work, should it work? </p>
  
  <pre><code> $(document).ready(function() {
  var max_width = 0;
  $('.content').find('img').each(function(){
          var this_width = $(this).width();
          if (this_width &gt; max_width) max_width = this_width;
  });
  $(this).closest('.project').css('width', max_width + 'px');
  });
  </code></pre>
  
  <p>Example of the layout. There are many projects. </p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="project"&gt;
          &lt;div class="content"&gt;
              &lt;img src="small.jpg"  height="100" width="100" /&gt;
              &lt;img src="large.jpg"  height="400" width="600" /&gt;
              &lt;img src="medium.jpg"  height="400" width="600" /&gt;
  
          &lt;/div&gt;
  
          &lt;div class="meta"&gt;Other content here.
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
      &lt;div class="project"&gt;
          &lt;div class="content"&gt;
              &lt;img src="small.jpg"  height="100" width="100" /&gt;
              &lt;img src="large.jpg"  height="400" width="600" /&gt;
  
         &lt;/div&gt;
  
          &lt;div class="meta"&gt;Other content here.
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>