2

我需要改进一个 jquery 脚本，它将图像容器的高度捕捉到基线网格。我想让它在窗口调整大小期间工作。

到目前为止，我将以下内容应用于已将溢出设置为隐藏的图像容器。其中一些是受到此处和此处提出的问题的启发。

/* Updates height on $(window).load(function(){}); */
$(window).load(function(){

    /* Adjust media container heights and image margins */
    function containerHeight(){
        var targetContainer = 'div.media';
        $(targetContainer).each(function(){
            var targetHeight = Math.round($(this).height() / 20) * 20 - 8;
            if($(this).height() < targetHeight){
                var newHeight = targetHeight - 20;
            }else{
                var newHeight = targetHeight;
            }
            $(this).css({
                'height': newHeight
            });
        });
        $(targetContainer).children('img').each(function(){
            $(this).css({
                'margin-top': Math.round(($(this).parent(targetContainer).height() - $(this).height()) / 2 )
            });
        });
    }
    containerHeight();
    /* Does not update height on $(window).bind('resize', function(){}); with <body class="full"> */
    $(window).bind('resize', function(){
        containerHeight();
    });

});

但是，我在http://pastie.org/2846491上的馅饼只适用于固定宽度的容器。

我需要为流体容器宽度/高度、窗口调整大小期间/之后和移动方向：纵向/横向更改，同时保持基线网格上的内容。

关于我应该如何处理这个问题的任何指示？请帮忙！

4

1 回答 1

0

我最近遇到了这个问题，并且陪审团操纵了一个解决方案。不是最优雅/最有效的解决方案，但肯定是可行的：

var fontSize = 20;
var lineHeight = 28;

$(window).resize(function() {
    $('img').each(function() {
        var heightDif = $(this).outerHeight();
        $(this).css('margin-bottom', fontSize + heightDif % lineHeight);
    });
});
$('img').load(function() { $(window).resize(); });

每当调整窗口大小时，代码都会触发，并计算图像高度与下一个最低基线之间的差异。然后它将差异添加到底部边距。该事件首先在 img 加载时触发（这是提高效率的机会）。

我希望这有帮助; 如果您有任何改进可以使它变得更好，我很想知道，所以我可以在我的代码中实现它们！

于 2011-11-24T23:56:26.937 回答