創建響應div 16：9

Question

我正在創建一個16：9比例響應div，但是當我調整窗口的大小時，container3仍然保持原始大小，我的代碼中有任何問題？任何人都可以幫助我？由於

$(document).ready(function(){ 
 
\t rp_config(); 
 

 
}); 
 
$(window).resize(function(){ 
 
\t rp_config(); 
 

 
}); 
 
function rp_config(){ 
 
\t var windowwidth = $(window).width(); 
 
\t var windowheight = $(window).height(); 
 
\t var bar = 64; 
 
\t var bottom = 45; 
 
\t var chat = 250; 
 
\t var container2_width = windowwidth - chat; 
 
\t var available_height = windowheight - bar - bottom; 
 
\t 
 
\t $(".container").width(windowwidth); 
 
\t $(".container2").width(container2_width); 
 
\t $(".container3").width(available_height/9 * 16); 
 
\t 
 
\t $(".container").height(available_height); 
 
\t $(".container2").height(available_height); 
 
\t $(".container3").height(available_height); 
 
\t 
 
\t 
 

 
} 
 
rp_config();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="background-color:#000;"> 
 
\t <div class="container2" style="background-color:#333;"> 
 
    \t <div class="container3" style="background-color:#ccc;"> 
 
     
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你需要決定container3的寬度是否比container2的大。

$(document).ready(function(){ 
 
\t rp_config(); 
 

 
}); 
 
$(window).resize(function(){ 
 
\t rp_config(); 
 

 
}); 
 

 
function rp_config(){ 
 
    var windowwidth = $(window).width(); 
 
    var windowheight = $(window).height(); 
 
    var bar = 64; 
 
    var bottom = 45; 
 
    var chat = 250; 
 
    var container2_width = windowwidth - chat; 
 
    var available_height = windowheight - bar - bottom; 
 
    
 

 
    var altWidth = available_height/9 * 16 
 
     ,altHeight = available_height; 
 
    if (altWidth > container2_width) { 
 
    altWidth = container2_width; 
 
    altHeight = altWidth/16 * 9; 
 
    } 
 
    
 
    $(".container").width(windowwidth); 
 
    $(".container2").width(container2_width); 
 
    $(".container3").width(altWidth); 
 
    
 
    $(".container").height(available_height); 
 
    $(".container2").height(available_height); 
 
    $(".container3").height(altHeight); 
 
} 
 
rp_config();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='case1' class="container" style="background-color:#000;"> 
 
\t <div class="container2" style="background-color:#333;"> 
 
    \t <div class="container3" style="background-color:#ccc;"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

這裏我用altHeight保持container3保持一個16：9的比例，你可以，如果你希望它填補了整個container2的區域中刪除它。