相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

当宽度根据用户屏幕大小改变时,如何将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以供参考.

谁能帮我？