title: How to find largest image in a list
body: <p>I have the following <code>HTML</code> structure:</p>
  
  <pre><code>&lt;ul id="list2"&gt;
    &lt;li class="_column small"&gt;
      &lt;img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W350xH300/Articles-(7)-350-300.jpg" alt="Home " title="Home " /&gt;
       &lt;h2&gt;&lt;a href="/cms_agency/more/articles/articles-(7)"&gt;Greece&lt;/a&gt;&lt;/h2&gt;
  
    &lt;/li&gt;
    &lt;li class="_column small"&gt;
      &lt;img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W720xH300/Articles-(1)-720-300.jpg" alt="Home " title="Home " /&gt;
       &lt;h2&gt;&lt;a href="/cms_agency/more/articles/articles-(1)"&gt;Stockholm&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
    &lt;li class="_column small"&gt;
      &lt;img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W350xH300/Articles-350-300.jpg" alt="Home " title="Home " /&gt;
       &lt;h2&gt;&lt;a href="/cms_agency/more/articles/articles"&gt;Sailing in Italy&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My problem is that it doesn't find the largest image in the <code>._column</code> and sometimes applies a width that is smaller than the largest image and is creating problems with my layout.</p>
  
  <p>I have the following code: </p>
  
  <pre><code> jQuery(document).ready(function () {
          jQuery("._column img").each(function () {
              if (this.width &gt; 350) {
                  jQuery(this.parentNode).addClass('large');
              }
              else {
                  jQuery(this.parentNode).addClass('small');
              }
  
          });
      });
  </code></pre>
  
  <p>Some sugestions? Thanks!</p>