这可以通过给出元素height：0和padding-bottom：30％来实现.

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

JSFiddle Demo

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

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

填充％和绝对位置

如果使用0-height元素存在任何问题,则demo还有一个使用包装元素和绝对位置实现的绿色框.不确定这种方法是否有任何好处.

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