html - 响应高度与宽度成比例

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

是的！

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); });
});

因为建议的Padding %解决方案不适用于max/min-widthand max-min height。