title: Using jquery, dynamically and proportionally resize an img
body: <p>The problem: To make an image inside a plugin resize dynamically (H&amp;W, proportionally) inside a div that gets shorter on window resize (there are essentially three areas: Top - static, bottom - static, middle - dynamic) with <code>width:100%</code> and <code>top:#px</code> <code>bottom:#px</code>. The images must also ultimately only resize their set height (603x427)</p>
  
  <p>Here's the page:</p>
  
  <p><a href="http://66.147.244.242/~happymas/enginethree/print.php" rel="nofollow">My current woe</a></p>
  
  <p>I'm pretty darn close, but what happens with the code below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(window).resize(function() {
                  var hgt = $(window).height() - 427;
                  var wid = $(window).width() - 633;
                  $('.slides_container img').height(hgt);
                  $('.slides_container img').width(wid);
                  $('.slides_container').height(hgt-30);
                  $('.slides_container').height(hgt);
                  $('.vid').width($(window).width());
              });
  &lt;/script&gt;
  </code></pre>
  
  <p>is the height of the image changes, as does the width, but they don't change proportionally. Instead, the width changes correctly, and the height changes correctly, but independent of one another. I want the images to remain proportional.</p>
  
  <p>Legend: <code>.slides_container</code> is part of the plugin and contains the image, <code>.slides_container img</code> is the image, <code>.vid</code> contains the <code>.container</code> for centering. For the above code, <code>$('.slides_container').height(hgt-30);</code> is to allow for pagination.</p>