javascript - 当 div 响应式收缩时，使其高度与宽度相匹配

Question

在 jsfiddle 中 http://jsfiddle.net/H3VW5/我有 3 个 div，其宽度基于百分比。有没有一种简单的方法(其中没有图像)使高度匹配特定的宽高比，以便当窗口缩小时，高度随宽度缩小以保持相同的形状？ IE。如果 div 大小为 600px x 600px 且 60%，并且窗口缩小至宽度 500px，则高度也会缩小为 500 像素？

/*CSS:*/

.div1 {width:60%; height:400px; background-color:#066; float:left}
.div2 {width:20%; height:400px; background-color:#09F; float:left;}
.div3 {width:20%; height:400px; background-color:#C00; float:left;}

<!--HTML:-->

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Answer 1

描述了一个好技巧here这可能会为您解决。

基本上，您可以让宽度为 auto(不指定 px 高度)，并使用带有百分比 (%) 的 padding-bottom。整洁。