如果你愿意忍受一些限制和跨浏览器的问题,这可以使用纯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;
}
如果希望框在调整大小时使用浏览器窗口进行缩放,请将代码移动到函数并在窗口调整大小事件上调用它。这里也是一个演示(查看示例全屏和调整浏览器窗口):
$(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;
}