web-dev-qa-db-ja.com

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

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

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

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

htmlcssresponsive-design
22
fedor.belov

パディング％

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

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

JSFiddleデモ

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>
49
Matt Coughlin

これは、vwおよびvh単位の最新のブラウザで可能になりました。

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

ブラウザのサポート： http://caniuse.com/#feat=viewport-units

うん！

12
ndp

また、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では機能しないためです。

2
sebnukem