<width> / <height>幅と高さをその順で書く
16 / 9は「幅16に対して高さ9」です。数値にpxなどの単位はつけません。
aspect-ratio
要素の幅と高さの比率を保つプロパティ。同じ幅のカードを、正方形・横長・縦長へ切り替えて比べます。
遊んでみよう
幅は220pxのまま、高さが比率に追従
ASPECT RATIO幅 220px
CSS
.element aspect-ratio: 16 / 9;
値のパターン
aspect-ratioの構成要素
auto望ましい比率を追加しない
初期値autoでは、画像など内在的な縦横比を持つ要素はその比率を使います。
height: auto高さを自動計算する
両方のサイズを固定すると比率はサイズを変えません。この教材は幅だけを固定し、高さを自動計算します。
早見表
初期値はautoです。幅 / 高さの順で数値を書き、よく使う形を短い指定で保てます。
01
auto内在比率を優先初期値02
1 / 1正方形幅＝高さ03
4 / 3標準的な横長カード04
16 / 9ワイドな横長動画05
3 / 4縦長ポートレート06
22 / 1と同じ比率高さは1よくある使い方
01
動画の再生領域を先に確保する
動画が読み込まれる前から16 : 9の領域を取り、表示後のレイアウトのずれを抑えます。
.video { width: 100%; aspect-ratio: 16 / 9; }02
サムネイルの形を揃える
画像の元サイズが違っても枠の縦横比を揃え、object-fitで中身の収め方を決めます。
.thumbnail { aspect-ratio: 4 / 3; object-fit: cover; }03
レスポンシブな正方形を作る
親要素に合わせて幅が伸び縮みしても、高さを自動計算して正方形を保ちます。
.avatar { width: 100%; aspect-ratio: 1 / 1; }ポイント
幅と高さを両方固定すると、比率は効かない。
aspect-ratioは望ましい比率をサイズ計算に使うプロパティです。widthとheightの少なくとも一方がautoのときに効果が表れます。内容の最小サイズなどほかの制約が優先される場合もあります。置換要素でないインラインボックスなどを除く要素に適用でき、子要素へは継承されません。
関連するCSSも見てみよう。
aspect-ratio と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。