在流体设计中,元素的宽度是其高度的百分比,反之亦然？

Question

我做了一个响应式设计,无论屏幕大小是多少,都必须保持其元素的比例(高度到宽度),所以我不知道任何元素的像素大小,我只能在% .

我可以将宽度或高度设置为浏览器大小的%,但我不知道如何设置其他属性值.

只使用CSS,使JS计算值不是一个选项.

Answer 1

去年我遇到了这个问题，经过一些乏味的研究，找到了一个模糊的解决方案。不幸的是，它涉及包装 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/