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

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

您想捕获调整大小事件，因此假设您当前的代码符合您的喜好

$(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 上的大写 I

Answer 2

我通常使用这个：

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()});
});

});