CSSのaspect-ratioでアスペクト比（縦横比）を固定する方法

CSSのaspect-ratioプロパティを使用して、アスペクト比（縦横比）を固定する方法の備忘録です。

aspect-ratioを使用すれば、縦と横の比率を固定してレスポンシブにも対応することができます。

aspect-ratioの使い方

ブロック要素の横（width）か縦（height）どちらかのサイズに「auto」を設定し、aspect-ratioで比率を指定します。

<div class="block">SAMPLE</div>

.block {
  width: 600px;
  height: auto;
  aspect-ratio: 3 / 2;
}

SAMPLE600 x 400

aspect-ratioの値に指定した「3 / 2」が、width / height の比率になります。

上記のサンプルでは、widthに「600px」が設定されているため、比率の「3：2」が適用されheightは「400px」になります。

.block {
  width: auto;
  height: 280px;
  aspect-ratio: 3 / 2;
}

SAMPLE420 x 280

heightに「280px」を設定した場合、「auto」を設定したwidthは「420px」となります。

代表的なアスペクト比

デザインでよく使用される、アスペクト比をまとめました。

正方形

縦横比「1：1」の正方形です。

1：1

.block {
  aspect-ratio: 1;
}

「aspect-ratio: 1 / 1;」は、「aspect-ratio: 1;」と省略できます。

黄金比

黄金比「1：1.618」は、人が最も美しいと感じるバランスの比率です。世界的に有名な企業のロゴマークなど、多くのデザインで採用されています。

8：5

.block {
  aspect-ratio: 8 / 5;
}

「1：1.618」をおおよその比率「5：8」で設定しています。

ワイド画面

ワイドは、テレビやパソコンの画面に使用されることの多い画面比率です。

16：9

.block {
  aspect-ratio: 16 / 9;
}

YouTubeの動画も「16：9」の比率で表示されています。