高度等于动态宽度（CSS流体布局）
这个问题在这里已经有了答案：
使用jQuery，你可以通过做到这一点
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
查看http://jsfiddle.net/n6DAu/1/上的工作示例
[更新：尽管我独立发现了这个窍门，但我知道蒂埃里科布伦茨打败了我。 你可以在A List Apart上找到他2009年的文章。 信贷到期的信用。]
我知道这是一个老问题，但我遇到了类似的问题，我只用CSS解决了这个问题。 这是我的博客文章，讨论解决方案。 这篇文章中包含一个实例。 代码在下面转贴。
HTML：
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS：
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%;
/* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver/* show me! */
}<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>有一种使用CSS的方法！
如果根据父容器设置宽度，则可以将高度设置为0，并将填充底部设置为根据当前宽度计算的百分比：
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
这适用于所有主流浏览器。