【CSS】レスポンシブに対応して要素の比率を保持する方法

任意のボックス要素の縦横のアスペクト比率を保持したまま、レスポンシブにも対応する方法を紹介します。

HTML

早速ですが、まずはHTMLの記述から。

<div class="aspect"></div>

何の変哲もない普通のボックス要素を用意します。

CSS

続いて重要なCSSの書き方ですが、仮に「横=4:縦=3」の場合を想定します。

.aspect {
	position: relative;
	width: 100%;
	line-height:1;
	padding-top: 75%;
}

この「padding-top」の値を求める方法ですが、次の計算式で導き出します。

縦比率 ÷ 幅比率 × 100

今回の場合は「3（縦） ÷ 4（横） × 100」という計算式になるので、「75」という数値になります。

このテクニックを知らないと、わざわざJavaScriptを持ち出すなどして、遠回りかつ複雑になってします。
スタイルシートだけで完結するので覚えておいて損はないでしょう。

以下、サンプルも用意してあるので挙動を確認してみてください。

DEMO : https://on-ze.com/demo/css-aspect/