在流体设计中将元素的宽度调整为其高度的百分比，反之亦然？ [复制]

我正在制作响应式设计，无论屏幕尺寸是什么，它都必须保持其元素的比例（高度与宽度），所以我不知道任何元素的像素大小，并且我只能以％工作。

我可以将宽度或高度设置为浏览器大小的百分比，但我不知道如何设置其他属性值。

仅使用CSS，让JS计算值是不可行的。

我去年遇到了这个问题，经过一些繁琐的研究后找到了一个晦涩的解​​决方案。不幸的是它涉及包装 DIV。结构很简单 - 您有一个包含内容容器的父 DIV 和另一个设置比例的 DIV。您设置了margin-top“比例”DIV 占父级宽度的百分比...示例：

#parent {
    position: relative;
}
.proportions {
    margin-top: 75%; /* makes parent height to 75% of it's width (4:3)  */
}
.container { /* contents container with 100% width and height of #parent */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

http://jsfiddle.net/twpTU/ http://jsfiddle.net/twpTU/