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

定義と使用方

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

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

特に、画像（<img>）や動画（<video>）、<div>要素など、要素ボックスの横幅（幅）と高さ（高さ）の比率を簡単に維持・調整・設定できます。

基本の例

形式の構文

CSS

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

値

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

構文

CSS

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;

形式の定義

aspect-ratioプロパティの形式定義
初期値	`auto`
適用要素	インラインボックスおよび`<ruby>`、テーブルボックスを除くすべての要素
パーセント（%）単位の値	適用されません
継承	いいえ
アニメーション	`auto`を除く計算済みの値の種類

例

aspect-ratioプロパティを例で見てみましょう。

基本的な使い方

CSS

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

動作しない場合の注意

aspect-ratioプロパティが動作しない場合があります。

必ずwidthまたはheightのいずれかがautoである必要があります。そうでないと、aspect-ratioが正しく機能しません。
align-items: stretchが適用される要素の場合
パーセント（%）単位の値を使用する場合

これらの事例を見ていきましょう。

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

aspect-ratioは、サイズが「自動」で計算される余地がある場合にのみ、比率を参照して動作します。
widthとheightの両方が明示的に指定されている場合、すでにサイズが固定されているため、比率を適用できません。

CSS

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

`align-items: stretch`が適用される要素の場合

align-items: stretchが適用される要素には、aspect-ratioプロパティは動作しません。

CSS

.flex-box {
    display: flex;
    align-items: stretch; /* 注目してください！ */
}
.box-1,
.box-2 {
    width: 100px;
}
.box-1 {
    height: 200px;
    background-color: orange;
    margin-right: 15px;
}
.box-2 {
    background-color: red;
    height: auto;
    aspect-ratio: 1/1;
    /*
        align-items: stretchが適用される要素には
        aspect-ratioは動作しません。
    */
}

パーセント（%）単位の値を使用する場合

aspect-ratioプロパティでパーセント（%）単位の値を使用する場合は、動作しません。

CSS

div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 100%; /* パーセント（%）単位の値は使用できないため、動作しません。 */
}

`<video>`要素に使用する際の注意点

<video>要素で再生される動画ファイルには、そのファイル固有の横縦比（アスペクト比）があります。

aspect-ratioプロパティは、<img>要素では画像ソースに適用されますが、<video>要素では再生される動画ソースには適用されず、<video>の要素ボックスに適用されます。以下の例を見てみましょう。

aspect-ratioプロパティは再生される動画ファイルには適用されず、<video>要素ボックスに適用されることは、上の例からもわかります。この場合、空白が生じることがあります。これはスタイル上の大きな問題になる可能性があります。<video>要素にaspect-ratioプロパティを使用する際に発生するスタイルの問題は、object-fitプロパティの値をcoverに指定することで解決できます。

以下は、object-fit: cover;を指定してスタイル上の問題を解決した例です。

覚えておきましょう！
<video>要素にaspect-ratioプロパティを使用する場合は、object-fit: coverも併せて使用してください。

ブラウザ互換性

aspect-ratioプロパティのブラウザ互換性
プロパティ	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`aspect-ratio`	88	88	89	15

仕様書

aspect-ratioプロパティに関する仕様書
仕様書
`aspect-ratio`	CSS Box Sizing Module Level 4 #aspect-ratio

参考資料

codingCourses：CSS aspect-ratio Property – Sets an Element’s Width-to-Height Ratio