調整窗口大小時保持div的寬高比

Question

我有一個難以解釋的問題。我有一個寬高比爲2：1的div。我希望它具有基於瀏覽器窗口大小的100％寬度或高度。

如果窗口高度大於divs高度，則大小應基於100％寬度。

如果窗口高度小於divs高度，則大小應該基於100％的高度。

隨着我的curren方法它閃爍，當我更大的尺寸。

看看這個鏈接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 {