创造责备div 16：9

Question

我正在创建一个16：9比率的响应div，但是当我调整窗口大小时container3仍然保持原始大小，我的代码中出现任何问题？有人能帮帮我吗？感谢

＆＃13;

＆＃13;

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

});
$(window).resize(function(){
	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;
	
	$(".container").width(windowwidth);
	$(".container2").width(container2_width);
	$(".container3").width(available_height / 9 * 16);
	
	$(".container").height(available_height);
	$(".container2").height(available_height);
	$(".container3").height(available_height);
	
	

}
rp_config();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要确定container3的宽度是否大于container2。

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

});
$(window).resize(function(){
	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;">
	<div class="container2" style="background-color:#333;">
    	<div class="container3" style="background-color:#ccc;">
        </div>
    </div>
</div>
</div>

这里我使用altHeight来保持container3保持16：9的比例，如果你想让它填满整个container2区域，你可以删除它。