CSSで要素のアスペクト比を設定する

#CSS

アスペクト比を3:2にしたかった

aspect-ratioなるピッタリのプロパティがあったのでこれを使った。

aspect-ratio - CSS: カスケーディングスタイルシート | MDN
aspect-ratio は CSS のプロパティで、要素ボックスの望ましい幅と高さの比率を定義することができます。つまり、親コンテナーやビューポートのサイズが変更されても、ブラウザーは要素の寸法を調整して、指定された幅と高さの比率を維持します。指定されたアスペクト比は、auto のサイズやその他のレイアウト機能の計算に使用されます。
favicon developer.mozilla.org
ogImage

ほとんどの主要ブラウザに対応しているようだ。

自分の場合はアスペクト比を3:2にしたかったので以下のようにした。

.content {
  aspect-ratio: 3 / 2;
}

これだけで簡単に要素のアスペクト比を設定できた。