プロパティ aspect-ratio

プロパティ aspect-ratio は、フレックスボックスの交差軸方向およびグリッドの水平軸方向の要素の配置を設定します。親要素に適用されます。

構文

cssセレクタ {
  aspect-ratio: auto または 比率;
}

値	説明
`auto`	要素に優先アスペクト比がなく、ブラウザが要素の幅と高さに基づいて自動的に設定します。
`比率`	比率は `16/9` のように記述します。ここで最初の数値は幅、2番目の数値は高さです。値が指定されていない場合は、`1` と見なされます。また、一部の比率は単一の数値で記述することも可能です。例えば、`2/1` は `0.5` と記述でき、同じ結果が得られます。
`auto && 比率`	比率がキーワード `auto` と組み合わされている場合（例: `auto` `1/2`）、指定された比率が選択されますが、固有のアスペクト比を持つ置換要素（画像やビデオなど）については、その固有の比率のみが使用されます。

ボタンに自動アスペクト比を設定してみましょう：

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

次に、ボタンのアスペクト比を 1/2 に設定してみましょう：

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат: