Question

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

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

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

Answer 1

填充％

这可以通过提供元素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高度元素有任何问题，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>

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

因为建议的填充％解决方案不适用于max/min-width和max-min height。

响应高度与宽度成正比

3 个答案:

填充％

填充％和绝对位置