css - ブラウザのサイズ変更時に縦横比を維持する

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 長方形、100%x/50%y 長方形。

もっと簡単な方法があるに違いない.... うーん... 助けて！