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

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

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

是否可以按比例缩放div像img只使用CSS一样？这是我的第一次尝试:http://dabblet.com/gist/1783363

例

div {
 max-width:100px;
 max-height:50px;
}
img {
 max-width:100px;
 max-height:50px;
}

实际结果

Container: 200 x 100
Div:       100 x 50
Image:     100 x 50

Container: 50  x 100
Div:       50  x 50  // I want this to be 50x25, like the image
Image:     50  x 25

我想根据CSS表达式设置div的高度.

基本上它应该被设置为视口宽度的一些%(比如90%), 我尝试了以下,但是没有工作;

height:expression(document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth );

我正在寻找一种跨浏览器的方式(IE7 +,FF4 +,Safari)