这可以通过CSS hack完成（请参见其他答案），但是也可以使用JavaScript轻松完成。
将div的宽度设置为（例如）50％，使用JavaScript检查其宽度，然后相应地设置高度。这是使用jQuery的代码示例：
$(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>
602392714
清零编程群