Question

我正在尝试根据窗口的尺寸调整容器div的大小。高宽比是这里最重要的方面，我想在给定比率的最大约束方向（高度或宽度）最大化容器的尺寸。我尝试了一些不成功的事情，这是最近的事情：

$(window).load(function() {
    var h = $(window).height();
    var w = $(window).width();

    If((h/w)>0.61){
        $('#container').css({'height': h, 'width':h*1.64}); }
        else{ $('#container').css({'height': w/1.64, 'width':w}); }
})

我需要更改什么才能让窗口调整大小？有没有更好的方法来解决这个问题？

提前感谢您的任何帮助。我对javascript / JQuery一点都不熟悉，也无法找到任何有用的信息......这件事让我疯狂......

Answer 1

您想要捕获resize事件，因此假设您当前的代码符合您的喜好

$(document).ready(function() {
    $(window).resize(function() {
        var h = $(window).height();
        var w = $(window).width();

        if((h/w)>0.61) {
            $('#container').css({'height': h, 'width':h*1.64});
        }
        else { 
            $('#container').css({'height': w/1.64, 'width':w});
        }
    });

});

让我们在if

上避开首都

Answer 2

这里试试这个链接...它会告诉你如何重新调整大小和调用函数等。 http://api.jquery.com/resize/

Answer 3

我通常使用它：

function resize () {
var w = $(window);
var containerWrap = $('#container-wrap');
containerWrap.css({ width:w.width(), height:w.height()});

}

我不确定这是否能回答你的比率问题。

编辑：

这可能会更有帮助：

$(document).ready(function () {
var missionWrap = $('#mission-wrap');
var w = $(window);
w.on('load resize',function() {
    missionWrap.css({ width:w.width(), height:w.height()});
});

}）;

使用JQuery根据窗口大小调整容器大小

3 个答案: