使用jQuery來根據窗口大小調整容器大小

Question

我想要根據窗口的大小調整容器大小。高寬比是這裏最重要的一個方面，我想根據給定的比例在最大約束的任何方向（高度或寬度）上最大化容器的尺寸。我曾經失敗嘗試了一些事情該是最近期：

$(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

檢查這個帖子：

JavaScript window resize event

不客氣。

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

}）;

Answer 3

你想要捕捉的調整大小事件，所以假設你目前的代碼工作，以您的喜好

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

}); 

而且我們避免資本我的，如果

Answer 4

這裏試試這個這個鏈接...它將告訴你如何重新調整尺寸和調用功能等。 http://api.jquery.com/resize/