[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