html - 幅に比例する応答性の高さ

Question

HTMLとCSSを使用して次のロジックを実装することは可能ですか？

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

実装したいこと：幅を小さくすると、高さも比例して小さくなります。

Answer 1

パディング％

これは、要素height:0とを指定することで実現できますpadding-bottom:30%。

すべてのブラウザで、パディングが％で指定されている場合、パディングは親要素の幅を基準にして計算されます。これは、レスポンシブデザインにとって非常に便利な機能です。

JSFiddleデモ

デモでは、ページ上部の青いボックスは1つ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); });
});

提案されたパディング％max/min-widthソリューションはとでは機能しないためmax-min heightです。