Question

我正在使用twitter bootstrap v2.3在其CSS库中的媒体缩略图。您可以在此处查看我正在处理的内容：http://beanstalkwebsolutions.com/portfolio-overview

这是我正在使用的jQuery：

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

基本上我的目标是因为每个缩略图都有不同的高度，我希望它们都是相同的高度，这个脚本在加载CSS时给它们所有相同的最小高度，每次根据任何缩略图调整屏幕大小最大的高度。

我完成了所有工作，但现在我无法弄清楚的问题是当你将屏幕拖到更小/更大的尺寸并且最小高度变得非常大时，我没有代码来减小最小高度所以他们的缩略图看起来太大了。有没有人对我有任何代码建议，所以div都有相同的高度，但永远不会太大？

如果您设置高度 css属性而不是 min-height ，则该解决方案不适用于我的原始目标，因为文本段落最终会延伸到的div。

Answer 1

在窗口调整大小时，您可以再次设置div的最小高度，如下所示： -

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

jQuery动态调整div的大小

1 个答案: