5

我正在使用 twitter bootstrap v2.3 在其 CSS 库中的媒体缩略图。你可以在这里看到我在做什么。

这是我正在使用的 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 看起来太大了。有没有人对我有任何代码建议，所以 div 都将具有相同的高度，但永远不会变得太大？

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

4

1 回答 1

10

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

$( window ).resize(function() {
  if($( window ).height() < 300){
  $( "div" ).css({min-height: 300px});
 } else {
  $( "div" ).css({min-height: 600px});
 }
});
于 2013-10-31T07:47:53.890 回答