0

私が抱えている問題は、コンテンツが読み込まれると、5 つの div すべてがうまく収まるのに、ウィンドウのサイズを変更すると、コンテナーのサイズがレイアウトに収まらないことです。

レイアウトを作成するには、アイソトープとこのスクリプトを使用して、画像を .small_box div に合わせます。

    // fittocontainer
    jQuery.fn.fittocontainer =
    function(){
        var div = this.parent();
        var img = this;
        var imAR = img.attr("height") / img.attr("width");
        var bgAR = div.height() / div.width();
        if(imAR >= bgAR){
            img.attr("width" , div.width());
            img.attr("height" , div.width() * imAR);
        }else{
            img.attr("height" , div.height());
            img.attr("width" , div.height() / imAR);
        }
        div.css({
            "overflow" : "hidden"
        });
        img.css({
            "left" : (div.width() - img.attr("width"))/2,
            "top" : (div.height() - img.attr("height"))/2
        });
        img.fadeIn();
    };

そしてこのCSS：

    .layout_container{
        width: 100%;
        overflow: hidden;
        height: 100%;
        position: absolute;
        top: 0;
        .layout{
            width: 103%;
            height: 100%;
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 1;
            overflow: hidden;
            min-height: 100%;
            max-height: 100%;
            margin-left: -0.5%;
            .small_box{
                width: 32%;
                overflow: hidden;
                height: 49%;
                margin-right: 1%;
                margin-bottom: 1%;
                &.large_h{
                    height: 100%;
                }
            }
            img{
                display: none;
            }
            iframe{
                width: 100%;
            }
        }
    }

どうすればこれを修正できますか？

4

2 に答える 2

1

ウィンドウのサイズが変更された後、コンテナーで再度計算を行うサイズ変更イベントをブラウザーに追加します。

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        $.fittocontainer();
    }, 200);
});
于 2013-02-27T10:00:51.150 に答える
0

これがあなたにとっての答えかもしれません

http://www.stackoverflow.com/questions/2720310/resize-div-on-browser-resize

于 2013-02-27T09:59:01.113 に答える