javascript - 具有恒定比例且始终为屏幕高度的 100% 的 Div

Question

我想创建具有以下行为的 div:

1. 它总是会将他的高度调整为浏览器窗口高度的 100%。
2. 它将调整他的宽度以保持恒定的比例(例如，他的宽度等于他高度的 3/5)

这里有一些示例做相反的事情 - 将宽度保持在浏览器窗口大小的某个固定百分比值，并相应地调整高度，但这不是我需要的。

Answer 1

试试下面的 jQuery:

$(window).resize(function(){
    $('#resizable').width($('#resizable').height()*3/5);
});

$(window).trigger('resize');

演示:

$(window).resize(function(){
    $('#resizable').width($('#resizable').height()*3/5);
});

$(window).trigger('resize');

html,body,#resizable{
    height:100%;
}
#resizable{
    border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="resizable"></div>