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

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

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

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。

developer.mozilla.org

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

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

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

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