div調整窗口大小

Question

我的問題是， 加載內容時，所有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%;
            }
        }
    }

知道我該如何解決嗎？

Answer 1

在窗口調整大小后，向瀏覽器添加一個調整大小事件，該事件再次對容器執行數學運算：

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        $.fittocontainer();
    }, 200);
});

Answer 2

這可能是你的答案

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