CSSでボックスのアスペクト比を固定する(レスポンシブ対応)

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