响应高度与宽度成正比

Question

是否可以实现以下逻辑使用HTML和CSS？

width: 100%;
height: 30% of width;

我想要实现的:如果我减小宽度,高度也会按比例减少.

Answer 1

填充%

这可以通过给出元素height:0和padding-bottom:30%.

在所有浏览器中,当以%指定填充时,它是相对于父元素的宽度计算的.对于响应式设计,这可能是一个非常有用的功能.

JSFiddle演示

在演示中,页面顶部的蓝色框是单个div.高度是响应的,它可以包含可变数量的内联内容而不增加高度.它在IE7/8/9/10,Firefox,Chrome,Safari和Opera中测试得很好.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

填充%和绝对位置

如果使用0高度元素有任何问题,演示还有一个绿色框,使用包装元素和绝对位置实现.不确定这种方法是否有任何好处.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

Answer 2

现在可以在具有vw和vh单位的现代浏览器上实现:

width: 100vw;
height: 30vw; /* 30% of width */

浏览器支持:http://caniuse.com/#feat=viewport-units

是啊!