ボックス
aspect-ratio
aspect-ratio は、箱の幅と高さの比を決めます。幅だけ決めておけば、高さが比に合わせて自動で決まります。動画の埋め込みや正方形のサムネイルに使います。
構文
auto || <ratio>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
height: auto;
aspect-ratio: 16 / 9;
}コントロール
aspect-ratio16 / 9
横
縦（省略すると 1）
元の比率を優先する (auto)
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
16 / 9：幅と高さの比です。/以降を省くと/ 1と同じになり、1.5は3 / 2と同じ意味です。auto：比を決めません。画像や動画は元の比率に、それ以外の箱は中身に合わせます。初期値です。auto 16 / 9：画像などの元の比率がわかればそちらを優先し、読み込む前などわからないあいだは 16 / 9 にします。
効かないとき
幅と高さの両方を決めていると、比は使われません。どちらかを auto のままにしておきます。このページのコードに height: auto を書いているのはそのためです。また、中身が比の高さに収まらないときは、箱は中身に合わせて縦に伸びます（overflow を visible 以外にすると比が保たれます）。