将div的高度设置为宽度的一半

Question

当宽度根据用户屏幕大小改变时,如何将div的高度设置为宽度的一半？

我在div上有以下内容......

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

宽度可以正常工作,如果屏幕太窄则锁定为400像素,如果屏幕太大,它也会停止以1200像素扩展.但是,我也希望高度可以改变为任何给定时间宽度的一半.就像是...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

这没有奏效(我并没有真正期待它).

如果可能的话,我更喜欢使用CSS,但是如果用户也手动调整互联网窗口的大小(就像目前的宽度那样),我也希望改变高度.我不确定CSS是否可行,但是,如果有一种方法可以通过Jquery实现这一点,我也很乐意使用它.

以上jsFiddle以供参考.

谁能帮我？

Answer 1

如果你只支持现代浏览器,你可以这样做:http://jsfiddle.net/kNPfh/

vw度量是视口宽度的1/100,因此50vw是屏幕宽度的50%.

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

如果没有,你可以使用:http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();