создать reponsive div 16: 9

Я создавал соотношение 16: 9 с учетом отношения div, однако, когда я изменяю размер окна, container3 все еще остается с исходным размером, любой проблемой в моем коде? Кто-нибудь может мне помочь? Благодарясоздать reponsive div 16: 9

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

источник

2015-06-17 Im Happy

Я запустил ваш фрагмент, но, похоже, контейнер3 изменил его размер относительно, вы можете объяснить, как он не изменился, или что вы сделали, что вы ожидаете, и неожиданно выйдет. – fuyushimoya

Почему вы используете javascript для простой задачи макета? –

@fuyushimoya изменение ширины окна, контейнер3 станет меньше и с соотношением сторон 16: 9 –

Вы должны решить, будет ли ширина 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.

источник

2015-06-17 08:02:40 fuyushimoya

большое спасибо ~~ это путают мои 2 часа теперь только для того, чтобы установить 'container3' в середину, используя css слева, я могу сделать свой собственный ... снова спасибо ~ –

Рад, что вы счастливы: D – fuyushimoya

создать reponsive div 16: 9

ответ

Смежные вопросы