CSSのaspect-ratioで縦横比を固定する方法【CSS】

こんにちは！コーダーのゆうしです。

画像や動画・iframeの縦横比をレスポンシブで維持したいとき、以前は padding-top を使ったハック的な手法が一般的でした。しかし現在はCSS の aspect-ratio プロパティを使うことでシンプルなコードで縦横比を固定できます。この記事では aspect-ratio の基本的な使い方から実務での活用例まで解説します。

aspect-ratioとは？

aspect-ratio は要素の縦横比を指定するCSSプロパティです。幅が変化しても指定した縦横比を維持したまま高さが自動で調整されます。

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

16 / 9 のように「幅 / 高さ」の比率で指定します。スラッシュで区切るのが特徴です。

基本的な使い方

16:9の横長ボックス

.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

width: 100% と組み合わせることで、親要素の幅に応じて高さが自動で決まります。

1:1の正方形

.square {
  width: 100px;
  aspect-ratio: 1 / 1;
  /* または */
  aspect-ratio: 1;
}

正方形の場合は 1 だけで指定できます。アイコンやアバター画像によく使います。

4:3のボックス

.card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
}

画像に使う

画像の縦横比を固定しつつ、はみ出た部分をトリミングしたい場合は object-fit と組み合わせます。

.card__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* はみ出た部分をトリミング */
}

object-fit: cover を指定することで、縦横比を維持しながら要素全体を埋めるように画像が表示されます。カード型レイアウトのサムネイル画像などで重宝します。

YouTubeなどの埋め込みに使う

iframeで動画を埋め込む場合も aspect-ratio が便利です。以前は padding-top: 56.25% というハック的な手法を使っていましたが、aspect-ratio を使うとシンプルに書けます。

以前の書き方（padding-topハック）

.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 × 100 */
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

aspect-ratioを使った書き方

.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
}

コードがシンプルになり、position: absolute も不要になります。

よく使う縦横比の一覧

実務でよく使う縦横比をまとめました

CSS変数と組み合わせる

プロジェクト全体で縦横比を統一したい場合はCSS変数と組み合わせると管理しやすくなります。

:root {
  --ratio-video: 16 / 9;
  --ratio-card:  4 / 3;
  --ratio-square: 1;
}

.video-wrap {
  aspect-ratio: var(--ratio-video);
}

.card__img {
  aspect-ratio: var(--ratio-card);
}

躓きやすいポイント

heightを指定すると効かない

aspect-ratio は height が指定されていない場合に機能します。height が明示的に指定されていると aspect-ratio が無視されるので注意してください。

/* NG：heightが指定されているとaspect-ratioが効かない */
.box {
  width: 100%;
  height: 300px;      /* これがあると効かない */
  aspect-ratio: 16 / 9;
}

/* OK */
.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

画像が縦横比通りに表示されない

<img> タグに aspect-ratio を指定した場合、object-fit を指定しないと画像がつぶれて表示されることがあります。object-fit: cover か object-fit: contain を合わせて指定してください。

ブラウザの対応状況

aspect-ratio はモダンブラウザはすべて対応しています。IE11は非対応なので、IE対応が必要なプロジェクトでは padding-top ハックを使ってください。現在はIEのシェアがほぼゼロなので基本的には気にしなくてOKです。

まとめ

aspect-ratio を使うことでシンプルなコードで縦横比を固定できます。以前の padding-top ハックと比べてコードが直感的でわかりやすくなるのが大きなメリットです。画像のトリミング・動画の埋め込み・カードレイアウトなど幅広い場面で活用できるので、ぜひ積極的に使ってみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。