CSS aspect-ratioプロパティ：要素の縦横比を自動的に計算

定義と使い方

aspect-ratioプロパティは、要素の縦横比（幅に対する高さの比率）を設定します。

このプロパティを使用すると、一方のサイズだけを指定しても残りのサイズが自動で計算され、レスポンシブレイアウトでも一定の比率を簡単に維持することができます。

形式構文

selector {
    aspect-ratio: auto || <ratio>
    /*
        <ratio>:
         - 横（数値）/縦（数値）：横に対する縦の比率です。
         - スラッシュ（/）がない場合は、横/縦比率の値（数値）です。
    */
}

値

• auto : 固有の縦横比（アスペクト比）を持つ画像や動画などの置換要素は、その縦横比が使用されます。その他の要素には固有の縦横比はありません。
• <ratio> : 横（数値）/縦（数値）：横に対する縦の比率です。（スラッシュ（/）の前後に空白があってもなくても同じ意味として扱われます。）
  スラッシュ（/）がない場合は、横/縦比率の値（数値）です。
  パーセント（%）単位の値は適用されません。

構文

aspect-ratio: 1 / 1; /* '1/1'と同じ。スラッシュ（/）の前後に空白があってもなくても同じ意味として扱われます */
aspect-ratio: 1;
aspect-ratio: 16/9;
aspect-ratio: 1.77;
aspect-ratio: auto;

/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

例

div {
    background-color: orange;
    width: 200px;
    /*
        heightが指定されていない場合、
        heightはautoです。
    */
    aspect-ratio: 1; /* '1/1'と同じ */
}

動作しない場合の注意

必ずwidthまたはheightのいずれかがautoである必要があります。

div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        heightの値がautoでない場合、
        aspect-ratioは動作しません。
    */
}

参考資料