CSS aspect-ratio で画像・動画・iframe の比率を固定する

YouTube 埋め込みの高さが画面幅に追従しない、画像が読み込まれた瞬間にページがガタッとずれる—— どちらも「比率が予約されていない」ことが原因です。かつては padding-top: 56.25% という 魔法の数字で枠を作っていましたが、現在は aspect-ratio: 16 / 9 の1行で解決します。 本記事では基本構文、ハックからの移行、object-fit 併用、CLS 対策までを実例で解説します。

The CSS aspect-ratio property fixes the width-to-height ratio of a box in one line, replacing the old padding-top: 56.25% hack. This guide covers the syntax, migration steps, combining it with object-fit, and using it to eliminate Cumulative Layout Shift (CLS).

TL;DR

• aspect-ratio: 16 / 9 の1行で比率固定。新規開発に padding-top ハックは不要
• 全モダンブラウザ対応(Chrome 88+ / Edge 88+ / Firefox 89+ / Safari 15+)
• width と height を両方指定すると aspect-ratio は無視される(片方は auto に)
• iframe は height 属性が CSS に反映されるため height: auto の明示が必要
• img には width/height 属性も併記 — 読み込み前に領域が確保され CLS を防げる
• 比率を強制した img/video には object-fit: cover で歪みを防ぐ

1. 基本構文 / Basic syntax

aspect-ratio は「幅 / 高さ」の比率を指定し、auto になっている側の寸法を 比率から自動計算させるプロパティです。

/* 幅は親に追従、高さは 16:9 から自動計算 */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 正方形。単一の数値は N:1 の意味(1 = 1:1) */
.avatar {
  width: 64px;
  aspect-ratio: 1;
}

/* 置換要素向け: 固有比率があればそれを優先、なければ 16:9 */
img.card {
  aspect-ratio: auto 16 / 9;
}

重要なのは「片方の寸法が auto のときだけ働く」というルールです。width と height を両方指定すると比率は単に無視されます。 また min-width / max-height などの制約は比率より優先されます。

aspect-ratio computes the auto dimension from the other one. It only applies while at least one dimension is auto, and min/max constraints always win over the ratio.

2. padding-top ハックからの移行 / Migrating from the padding-top hack

padding のパーセント値は親要素の幅を基準に解決される——この仕様を利用して 「幅に比例した高さの枠」を作るのが padding-top ハックです。16:9 なら 9 ÷ 16 × 100 = 56.25%。 ラッパー要素と absolute 配置の子が必須でした。

/* Before: padding-top ハック(ラッパー + absolute 必須) */
.embed-wrap {
  position: relative;
  width: 100%;
}
.embed-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 9 / 16 * 100 */
}
.embed-wrap > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* After: aspect-ratio(ラッパー不要、要素に直接) */
.embed-wrap > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

主要な比率と padding-top 値の対応は次のとおりです。

移行時のチェックポイントは2つ。(1) ハック用ラッパーの position: relative と::before を削除する。(2) 子要素の position: absolute; height: 100% を外す。 消し忘れると高さが二重に計算され、縦に間延びします。

Percentage padding resolves against the parent's width — that is why 9 / 16 × 100 = 56.25% creates a 16:9 box. When migrating, remove both the ::before spacer and the absolutely positioned child, or the height will be computed twice.

3. 画像・動画・iframe での実践 / Images, video and iframes

img — まず HTML の width/height 属性を必ず書きます。モダンブラウザは属性値から 比率を自動計算し、画像読み込み前から領域を確保します。元画像と違う比率で切り抜きたいときだけ CSS の aspect-ratio を上書きし、object-fit: cover で歪みを防ぎます。

<img src="/hero.jpg" width="1200" height="630" alt="ヒーロー画像" class="hero" />

/* 属性の比率を保ったまま可変幅に */
.hero {
  width: 100%;
  height: auto;
}

/* 一覧サムネイルは 16:9 に統一して切り抜き */
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 引き伸ばさず中央で切り抜く */
}

iframe(YouTube 埋め込み) — 埋め込みコードの height="315" 属性は CSS の height: 315px として扱われるため、height: auto で打ち消さないと aspect-ratio が働きません。これが「aspect-ratio が効かない」最頻出パターンです。

iframe.youtube {
  width: 100%;
  height: auto;       /* height="315" 属性を打ち消す */
  aspect-ratio: 16 / 9;
  border: 0;
}

video — 動画自体に固有比率があるため通常は何もしなくて構いません。 ポスター画像表示中もスペースを確保したい場合や、ソースが混在する場合にaspect-ratio: 16 / 9 + object-fit: cover を指定します。

For images, keep the HTML width/height attributes and override the ratio in CSS only when cropping (add object-fit: cover). For iframes, the height attribute maps to CSS height, so you must declare height: auto or aspect-ratio will not apply — the most common cause of "aspect-ratio not working".

4. CLS(レイアウトシフト)対策 / Preventing layout shift

CLS(Cumulative Layout Shift)は Core Web Vitals の指標の1つで、読み込み中にコンテンツが ずれた量を表します。画像・広告・埋め込みが「高さ0で始まり、読み込み後に膨らむ」のが典型的な原因です。 対策は一貫していて、読み込み前に高さを予約すること。

• 画像: width/height 属性を書く(ブラウザが属性から比率を導出して領域確保)
• 動的に差し込む埋め込み・広告枠: コンテナに aspect-ratio を指定して枠を先に作る
• カルーセルやサムネイル一覧: 全アイテムに同じ aspect-ratio + object-fit: cover で高さを統一

/* 遅延読み込みする埋め込みカードの枠を先に確保 */
.embed-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e5e7eb; /* スケルトン表示 */
}

CLS happens when late-loading content pushes the page around. Reserve the space up front: width/height attributes for images, and an aspect-ratio box for lazy-loaded embeds and ad slots.

5. ブラウザ対応と注意点 / Browser support and gotchas

対応状況は Chrome 88+(2021年1月)、Edge 88+(2021年1月)、Firefox 89+(2021年6月)、 Safari 15+(2021年9月)。つまり現行のモダンブラウザはすべて対応済みで、 padding-top ハックが必要なのは Safari 14 以前をサポートする案件だけです。

ハマりやすい注意点をまとめます。

• width と height の両方指定で無視される(iframe の height 属性も含む)
• min-* / max-* 制約は aspect-ratio より優先される
• テキストなどを含む通常要素は、コンテンツが枠より大きいと比率を破って伸びる(仕様どおりの挙動)。 厳密に固定したい場合は min-height: 0 を指定し、あふれは overflow で制御する
• aspect-ratio: auto 16 / 9 は「固有比率があればそれを優先、なければ 16:9」。 読み込み前の img のプレースホルダに便利

Supported in Chrome/Edge 88+, Firefox 89+, Safari 15+ — every modern browser. Watch out: explicit width+height pairs and min/max constraints override the ratio, and content can stretch a non-replaced box beyond it unless you add min-height: 0 and manage overflow.

English summary

The CSS aspect-ratio property sets the preferred width-to-height ratio of a box, so the browser can compute the auto dimension from the other one: width: 100%; aspect-ratio: 16 / 9;gives you a fluid 16:9 container in one line. It replaces the classic padding-top hack, which abused the fact that percentage padding resolves against the parent's width (9 / 16 × 100 = 56.25%) and required a wrapper plus an absolutely positioned child. When migrating, delete the ::before spacer and the absolute positioning, or heights get computed twice. The property only applies while at least one dimension is auto — for YouTube iframes you must declare height: auto because theheight="315" attribute maps to CSS height. For images, prefer HTML width/height attributes: modern browsers derive the intrinsic ratio from them and reserve space before the image loads, which eliminates Cumulative Layout Shift; use aspect-ratio with object-fit: cover only when cropping to a different ratio. Browser support is universal among modern browsers (Chrome/Edge 88+, Firefox 89+, Safari 15+, all shipped in 2021), so keep the padding-top hack only for legacy Safari 14 support. Remaining gotchas: min/max constraints win over the ratio, and overflowing content can stretch a non-replaced box beyond it.

まとめ

• 新規開発は aspect-ratio 一択。padding-top ハックは Safari 14 以前の互換のためだけに残す
• 「効かない」ときは width/height の両方指定(iframe の属性含む)と min/max 制約をまず疑う
• img は属性で、動的な埋め込みは aspect-ratio で「読み込み前に高さを予約」— これが CLS 対策の本質

関連ツール / Related tools

• Aspect Ratio Calculator
• Image Resizer — 計算した寸法どおりに画像を縮小
• CSS Generator

関連ガイド / Related guides

• CSS中央寄せの方法まとめ / How to center in CSS
• 正規表現 Lookbehind のブラウザ対応 / Regex lookbehind browser support
• ブラウザ完結の無料開発ツール15選 / Browser-only dev tools comparison
• UNIX timestamp 変換と落とし穴 / UNIX timestamp pitfalls