title: jQuery to dynamically resize divs
body: <p>I'm using the media thumbnails that twitter bootstrap v2.3 has in their CSS library. You can see what I'm working on <a href="http://beanstalkwebsolutions.com/portfolio-overview" rel="nofollow noreferrer">here</a>.</p>
  <p>Here is the jQuery I'm using:</p>
  <pre><code>&lt;script&gt;
  $(window).load(function () {
      var maxHeight = 0;
      var divs = jQuery(&quot;.thumbnail&quot;);
      jQuery.each(divs, function () {
          var height = jQuery(this).height();
          if (maxHeight &lt; height) maxHeight = height;
  
      });
      divs.css('min-height', maxHeight + 'px');
  });
  $(window).resize(function () {
      var maxHeight = 0;
      var divs = jQuery(&quot;.thumbnail&quot;);
      jQuery.each(divs, function () {
          var height = jQuery(this).height();
          if (maxHeight &lt; height) maxHeight = height;
  
      });
      divs.css('min-height', maxHeight + 'px');
  });
  &lt;/script&gt;
  </code></pre>
  <p>Basically my goal was since each thumbnail had different heights and I wanted them to all be equal heights, this script gives them all the same min-height in CSS on load, and everytime the screen is resized based on whichever thumbnail has the greatest height.</p>
  <p>I got all that to work, but now the problem I can't figure out is when you drag the screen to smaller/bigger sizes and the min-height becomes very large, I have no code to decrease the min-height so they thumbnail divs look way too big. Does anyone have any code suggestions for me so the divs will all have equal height, but never get too big?</p>
  <p>And if you set the <strong>height</strong> css property rather than <strong>min-height</strong>, the solution doesn't work for my original goal because the text paragraphs end up extending outside the divs.</p>