保持浏览器调整大小的纵横比

Question

包装容器css是width：auto;最大高度：70％;

我希望div在浏览器窗口高度改变时保持其宽高比。

jfiddle：http://jsfiddle.net/7JNuU/

HTML

<div id="feedwrapper">

<!--FULL group-->
<div id="tile">
<div id="fullcell">1</div>
</div>
<!--FULL group-->

<!--4up group-->
<div id="tile">
<div id="solocell">1</div>
<div id="solocell">2</div>
<div id="solocell">3</div>
<div id="solocell">4</div>
</div>
<!--4up group-->

<!--2top group-->
<div id="tile">
<div id="solocell">1</div>
<div id="solocell">2</div>
<div id="cell2xbot">3</div>
</div>
<!--2top group-->

CSS

#feedwrapper{
width:auto;
max-height:70%;
top:80px;
bottom:60px;
margin-bottom:80px;
left:300px;
position:absolute;
background-color:#FFF;
white-space:nowrap;
display:block;
}
#tile{ position:relative; border:none; padding:0px; min-width:640px; height:100%; margin:0px 2px 2px 0px; background-color:#CC6; float:left;}

#fullcell{width:100%; height:100%; background-color:#F99; display:block;}
#solocell{ width:50%; height:50%; background-color:#36C; display:block; float:left;}
#cell2xbot{ width:100%; height:50%; background-color:#C93; display:block; float:left;}
#cell2xtop{ width:100%; height:50%; background-color:#C66; display:block; float:left;}
#cell2yleft{ width:50%; height:100%; background-color:#99C; display:block; float:left;}
#cell2yright{ width:50%; height:100%; background-color:#FC6; display:block; float:right;}

我正在处理的页面是：http://www.jordache.com/connect.php

网格使用正方形和矩形。 50％x50％正方形，100％正方形，50％x / 100％y rect，以及100％x / 50％y rect。

必须有一种更简单的方式.... grrrrr ...帮助！