javascript - 创建响应 div 16 :9

Question

我正在创建一个 16:9 比例的响应式 div，但是当我调整窗口大小时 container3 仍然保持原始大小，我的代码有什么问题吗？任何人都可以帮助我吗？谢谢

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

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

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的整个区域，你可以去掉它。