jQuery to dynamically resize divs

Question

I'm using the media thumbnails that twitter bootstrap v2.3 has in their CSS library. You can see what I'm working on here.

Here is the jQuery I'm using:

<script>
$(window).load(function () {
    var maxHeight = 0;
    var divs = jQuery(".thumbnail");
    jQuery.each(divs, function () {
        var height = jQuery(this).height();
        if (maxHeight < height) maxHeight = height;

    });
    divs.css('min-height', maxHeight + 'px');
});
$(window).resize(function () {
    var maxHeight = 0;
    var divs = jQuery(".thumbnail");
    jQuery.each(divs, function () {
        var height = jQuery(this).height();
        if (maxHeight < height) maxHeight = height;

    });
    divs.css('min-height', maxHeight + 'px');
});
</script>

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.

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?

And if you set the height css property rather than min-height, the solution doesn't work for my original goal because the text paragraphs end up extending outside the divs.

Answer 1

On window resize you can set the min-height of the divs again, like this:-

$( window ).resize(function() {
  if($( window ).height() < 300){
  $( "div" ).css({min-height: 300px});
 } else {
  $( "div" ).css({min-height: 600px});
 }
});