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

向浏览器添加一个resize事件，在调整窗口大小后再次对容器进行数学运算：

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

Div调整窗口大小调整大小

2 个答案: