`aspect-ratio` 幅と高さの比率を固定する

重要度4 / 5

意味

幅が変わっても、高さの比率を保ちたいときに使います。16 / 9 は横長、1 / 1 は正方形です。画像や動画の枠を、中身が来る前から確保するときに使います。

高さを px で固定するより、画面幅が変わったときの空きや切れが少なくなります。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="frame"></div>

CSS

.frame {
  width: min(100%, 24rem);
  aspect-ratio: 16 / 9;
  background: #d9d6e8;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）