CSSでアスペクト比(縦横比)を固定する方法。
HTML
<div class="box"> <div class="content">コンテンツ内容</div> </div>
CSS
.box { position: relative; width: 100%; } .box:before { content: ""; display: block; padding-top: 75%; } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.box:beforeに設定したpadding-topの値を変更することで、アスペクト比(縦横比)をコントロールできる。
<算出方法>
高さの比率 ÷ 幅の比率 × 100
上記の例では、4:3の比率で設定しています。
3÷4×100=75(%)
<アスペクト比の参考>
4:3・・・・padding-top: 75%;
16:9・・・・padding-top: 56.25%
3:2・・・・padding-top: 66.6%;
黄金比・・・padding-top: 62%;