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 に答える