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%;