Question

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

到目前为止，我将以下内容应用于已将溢出设置为隐藏的图像容器。其中一些灵感来自于here和here提出的问题。

/* 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的贴身仅适用于固定宽度的容器。

我需要在流动容器宽度/高度，窗口调整大小和移动方向之间/之后进行此工作：纵向/横向更改，同时将内容保留在基线网格上。

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

Answer 1

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

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 load（这是提高效率的机会）。

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

将图像容器高度调整为值的倍数（在加载，方向更改和调整大小时）

1 个答案: