参见英文答案 >
Maintain the aspect ratio of a div with CSS14答案假设我有一个div，它的宽度为body的50％。如何使其高度等于该值？因此，当浏览器窗口宽度为1000px时，div的高度和宽度都为500像素。
解决方法
如果你愿意忍受一些限制和跨浏览器的问题，这可以使用纯CSS。然而，它可以轻松，灵活地使用Javascript。如果你需要一个纯CSS解决方案，请参阅其他答案。
将div的宽度设置为(例如)50％，使用JavaScript来检查其宽度，然后相应地设置高度。这里是一个代码示例(我使用jQuery，一个JavaScript库)：
$(function() {
var div = $('#dynamicheight');
var width = div.width();
div.css('height',width);
});
#dynamicheight
{
width: 50%;
/* Just for looks: */
background-color: cornflowerblue;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="dynamicheight"></div>
如果希望框在调整大小时使用浏览器窗口进行缩放，请将代码移动到函数并在窗口调整大小事件上调用它。这里也是一个演示(查看示例全屏和调整浏览器窗口)：
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight()
{
var div = $('#dynamicheight');
var width = div.width();
div.css('height',width);
}
#dynamicheight
{
width: 50%;
/* Just for looks: */
background-color: cornflowerblue;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="dynamicheight"></div>
