title: Scaling image to fit container while keeping aspect ratio with jquery
body: <p>I've been trying to scale images to fit a parent container. Here's my code:</p>
  
  <p>Markup</p>
  
  <pre><code>&lt;ul class="slides"&gt;
      &lt;li class="scale"&gt;&lt;img src="&lt;?php echo $attachments-&gt;src('full'); ?&gt;" /&gt;&lt;/li&gt;
      &lt;li class="scale"&gt;&lt;img src="&lt;?php echo $attachments-&gt;src('full'); ?&gt;" /&gt;&lt;/li&gt;
      &lt;li class="scale"&gt;&lt;img src="&lt;?php echo $attachments-&gt;src('full'); ?&gt;" /&gt;&lt;/li&gt;
      &lt;li class="scale"&gt;&lt;img src="&lt;?php echo $attachments-&gt;src('full'); ?&gt;" /&gt;&lt;/li&gt;
      &lt;li class="scale"&gt;&lt;img src="&lt;?php echo $attachments-&gt;src('full'); ?&gt;" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fullWidth {
      width:100%;
      height:auto;
  }
  .fullHeight {
      width:auto;
      height:100%;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.scale img').each(function(){
      var img = $(this);
  
      if (img.height() &lt; img.width()){
          img.addClass('fullWidth');
      } else {
          img.addClass('fullHeight');
      }
  });
  </code></pre>
  
  <p>What's weird is that although some images are portrait and some are landscape, the JS gives all the images the <code>fullHeight</code> class. I want the images to scale and resize as it's parent does, as the parents use percentage dimensions. I've tried many plugins but none seem to work for me. Anyone got an idea?</p>