响应高度与宽度成正比答案

【问题标题】：Responsive height proportional to width响应高度与宽度成正比
【发布时间】：2012-07-17 03:52:06
【问题描述】：

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

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

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

【问题讨论】：

您这样做的最终目标是什么？我认为你需要 javascript 来做这样的事情

标签： html css responsive-design

【解决方案1】：

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

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

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

是的！

【讨论】：

现代解决方案 +1。请记住，vm 支持适用于 IE9 及更高版本！（不包括对 vmin 和 vmax 的支持）
不幸的是，这是基于视口的大小，而不是父元素的大小。

【解决方案2】：

同样使用 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-width 和 max-min height。

【讨论】：

【解决方案3】：

填充 %

这可以通过给元素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>

【讨论】：

哇！我正在寻找解决问题的方法，并找到了这个完美的解决方案...... 7 年后！为了回答你的问题，我更喜欢第二种解决方案，特别是在处理不同尺寸的图像时：当位置是绝对时，对齐图像更容易。