Question

我有一个问题有点难以解释。我有一个宽高比为2：1的div。我希望它具有基于浏览器窗口大小的100％宽度或高度。

如果窗口高度大于div高度，则尺寸应基于100％宽度。

如果窗口高度小于div高度，则尺寸应基于100％高度。

当我的尺寸变大时，我的电流会闪烁。

请查看此链接http://acozmo.com/me/以获取演示。

HTML

<section id="container">
</section>

JQuery的

function update() {

        var $documentHeight = $(document).height();
        var $windowHeight = $(window).height();
        var $documentWidth = $(document).width();
        var $windowWidth = $(window).width();

        var $container = $('#container');

        if ( $windowHeight >= $documentHeight ) {
            $container.width($windowWidth);
            $container.height($windowWidth / 2);
        }
        if ( $windowHeight < $documentHeight ) {
            $container.width($windowHeight * 2);
            $container.height($windowHeight);
        }
    }

    $(document).ready(function() {
        update()
    });

    $(window).resize(function() {
        update();
    })

Answer 1

要在保持纵横比的同时调整大小以适应窗口内部，请使用初始大小设置容器，然后将区域宽度除以容器的宽度以获得比例。然后，您需要检查以确保秤不会使高度太大。请参阅下面的代码和fiddle - 为了完整性，我添加了高度大于宽度的情况。

要停止闪烁，请使用setTimeout限制调整大小功能。这将确保仅每n毫秒调用一次更新。您可以使用该号码，直到找到合适的平衡点。

var container = $('#container'),
    updateTimeout,
    threshold = 100;

function update() {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        width = container.width(),
        height = container.height(),
        scale;

    if ( windowWidth > windowHeight ) {
        scale = windowWidth / width;
        if ( height * scale > windowHeight ) {
            scale = windowHeight / height;
        }
    }
    else {
        scale = windowHeight / height;
        if ( width * scale > windowWidth ) {
            scale = windowWidth / width;
        }
    }
    container.width(Math.round(width * scale));
    container.height(Math.round(height * scale));
}

$(document).ready(function() {
    update();
});

$(window).resize(function() {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(update, threshold);
});

Answer 2

可能会发生这种情况，因为您使用的是第二个if，而不是else。。。它命中第一个if，收缩高度，然后点击第二个if并增加它。

尝试更改此内容（第二个if）：

if ( $windowHeight < $documentHeight ) {

。。。对此：

else {

调整窗口大小时保持div的宽高比

2 个答案: