Widely available YES。全主要ブラウザでサポート済み。padding ハックを置き換えて使用可能。

aspect-ratio property

aspect-ratio は CSS のプロパティで、要素ボックスの望ましい幅と高さの比率を定義することができます。つまり、親コンテナーやビューポートのサイズが変更されても、ブラウザーは要素の寸法を調整して、指定された幅と高さの比率を維持します。指定されたアスペクト比は、auto のサイズやその他のレイアウト機能の計算に使用されます。

aspect-ratio が何らかの効果を持つためには、ボックスのサイズの少なくとも 1 つが自動である必要があります。幅も高さも自動サイズでない場合、指定されたアスペクト比はボックスの推奨サイズに何の影響も持ちません。

サイジングメディア

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
aspect-ratio
88
88
89
15
88
15
auto
88
88
89
15
88
15
HTML 属性
aspect_ratio_computed_from_attributes

「幅」属性と「高さ」属性から計算されたアスペクト比
79
79
71
15
79
15
aspect_ratio_computed_from_attributes

「幅」属性と「高さ」属性から計算されたアスペクト比
79
79
71
14
79
14
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15)
実装メモ
  • Safari は有効な `src` がない画像用のスペースを保存しないため、遅延読み込みに依存するレイアウトが中断される可能性があります (バグ 224197 を参照)。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (15)
実装メモ
  • iOS の Safari は、有効な `src` がないと画像用のスペースを保持しないため、遅延読み込みに依存するレイアウトが中断される可能性があります (バグ 224197 を参照)。

基本構文

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

.avatar {
  aspect-ratio: 1;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
}

ライブデモ

16:9(video)

aspect-ratio property 16:9(video) demo.

プレビュー全画面表示

1:1(positivesideshape)

aspect-ratio property 1:1(positivesideshape) demo.

プレビュー全画面表示

4:3(true)

aspect-ratio property 4:3(true) demo.

プレビュー全画面表示

実務での使いどころ

  • レスポンシブ動画コンテナ

    iframe や video 要素のラッパーに 16:9 のアスペクト比を設定し、幅に応じて高さが自動計算される。

  • サムネイルグリッドの統一

    異なるサイズの画像を同一アスペクト比のコンテナに収め、グリッドの整列感を維持する。

注意点

  • コンテンツが指定したアスペクト比に収まらない場合、要素が拡張される（overflow で制御可能）。
  • min-height / max-height との組み合わせでは、aspect-ratio が上書きされる場合がある。

フォールバック戦略

CSS 
/* aspect-ratio 非対応環境向けフォールバック (16:9) */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;
}
.video-wrapper > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

アクセシビリティ

  • アスペクト比の維持はレイアウトシフト（CLS）の抑制にも寄与し、ユーザー体験の向上につながる。

参考リンク