CSSでバラバラなサイズの画像の縦横比を揃えるために、いままでは疑似要素を使いまあまあの行数を記述して対応していました。
それがaspect-ratioプロパティを使うと、3行で揃えることができます。
すべての主要ブラウザでサポート済みです。（2021年にChrome、Firefox、Safariでサポート）
目次
記述内容
下記で画像を16：9で表示されるようにします。
img{
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
コードをあてたバラバラなサイズの画像
画像をクリックすると元画像へリンクします。
今回は画像を例にしましたが、img以外にも縦横比を適用できます。
また、デザインを元に画像の縦横比を求めて構築する場合は、下記のようなツールがあると便利かもしれません。
・アスペクト比計算ツール
https://aspect.arc-one.jp/
参考
・CSSの「aspect-ratio」で画像のアスペクト比を指定する
https://recooord.org/css-aspect-ratio/
・MDN Web Docs – aspect-ratio
https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio
