参见英文答案 >
Maintain the aspect ratio of a div with CSS21个
我做了一个响应式设计,无论屏幕大小是多少,都必须保持其元素的比例(高度到宽度),所以我不知道任何元素的像素大小,我只能在％ .
我做了一个响应式设计,无论屏幕大小是多少,都必须保持其元素的比例(高度到宽度),所以我不知道任何元素的像素大小,我只能在％ .
我可以将宽度或高度设置为浏览器大小的％,但我不知道如何设置其他属性值.
仅使用CSS,使JS计算值不是一个选项.
解决方法
去年我遇到了这个问题,经过一些乏味的研究后发现了一个模糊的解决方案.不幸的是它涉及包装DIV.结构很简单 – 你有一个包含内容容器的父DIV和另一个设置比例的DIV.您将’比例’DIV的margin-top设置为父级宽度的百分比…示例：
#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;
}
