要素のアスペクト比（縦横比）を指定するプロパティです。16/9や1/1のように指定し、レスポンシブな画像や動画の表示で縦横比を維持します。padding-topハックの代替として、より直感的な実装が可能です。
aspect-ratio: <ratio> | auto| aspect-square | aspect-ratio: 1 / 1 |
| aspect-video | aspect-ratio: 16 / 9 |
| aspect-auto | aspect-ratio: auto |
任意値: aspect-[4/3]
aspect-ratio: 16 / 9;16:9の横長比率
aspect-ratio: 1 / 1;正方形
aspect-ratio: 4 / 3;4:3の比率
aspect-ratio: 3 / 4;3:4の縦長比率
aspect-ratio: 21 / 9;21:9のワイド比率
aspect-ratio: 9 / 16;9:16のモバイル縦長比率
画像やiframeの埋め込みで、レイアウトシフトを防ぐのに効果的。
widthまたはheightのどちらかは指定する必要がある。
AIは古い知識でpadding-top比率ハック（padding-top: 56.25%）を提案しがちですが、現在はaspect-ratio: 16 / 9の1行で済みます。またimg要素はwidth/height属性からアスペクト比が自動計算されるため、CLS（レイアウトシフト）対策には属性指定＋aspect-ratioの理解が重要です。両方の寸法を明示すると aspect-ratio は無視される仕様も見落とされがちです。
このpadding-topハックによる16:9埋め込みをaspect-ratioに置き換えて
画像読み込み時のレイアウトシフトを、width/height属性とaspect-ratioで防いで
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。