响应高度与宽度成比例

Question

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

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

我想要实现的内容：如果我减小宽度，高度也将按比例减小。

Answer 1

填充百分比

这可以通过给出元素CCD_ 1和CCD_。

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

JSFiddle演示

在演示中，页面顶部的蓝色框是一个单独的div。高度是响应性的，并且它可以在不增加高度的情况下包含可变数量的内联内容。它在IE7/8/9/10、Firefox、Chrome、Safari和Opera中测试良好。

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

填充百分比和绝对位置

如果使用0-height元素有任何问题，那么这个演示还有一个绿框，它是使用包装器元素和绝对位置实现的。不确定这种方法是否有任何好处。

.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-单位

是啊！

Answer 3

还有JQuery，你可以做：

$(window).ready(function () {
    var ratio = 3 / 10, $div = $('#my_proportional_div');
    $div.height($div.width() * ratio);
    $(window).bind('resize', function() { $div.height($div.width() * ratio); });
});

因为所建议的填充%解决方案不适用于CCD_ 6和CCD_。