jQuery boşlukları dinamik olarak yeniden boyutlandırmak için

Question

Twitter bootstrap v2.3'ün CSS kitaplığında sahip olduğu medya küçük resimlerini kullanıyorum. Burada görebilirsiniz üzerinde çalıştığım şeyi: http://beanstalkwebsolutions.com/portfolio-overview İşte

jQuery kullanıyorum edilir: Her bir küçük farklı yüksekliklere vardı ve onları istediğim yana

Temelde

<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> 

amacım herkesin eşit olması edildi yükseklikleri, bu betik yük altında CSS'de aynı min yüksekliğini verir ve ekran her küçük resmin en yüksek yüksekliğine bağlı olarak yeniden boyutlandırılır.

Çalışmak için elimden geleni yapıyorum, ancak şimdi anlayamadığım sorun ekranı daha küçük/daha büyük boyutlara sürüklediğinizde ve min-yüksekliğinin çok büyük olduğu zaman, min. yükseklik böylece minik resimlerde çok büyük görünüyorlar. Kimsenin benim için herhangi bir kod önerisi var mı? Böylece div'lerin hepsi eşit yüksekliğe sahip olacak, ama asla fazla büyük olmayacak mı?

Ve min-height yerine yükseklik css özelliğini ayarlarsanız metin paragrafları div dışında uzanan sona çünkü çözüm benim orijinal hedef için çalışmaz.

pencerede

Answer 1

böyle, yeniden div min-yüksekliğini ayarlayabilirsiniz boyutlandırmak: -

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