[copy]height-equal-to-dynamic-width-css-fluid-layout | 使元素高度等于动态宽度
There is a way using CSS!
If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
This works well in all major browsers.
https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout