【A】aspect-ratioで縦横比を指定する

経緯

『この画像縦横1:1で表示させたいけど%だとwidthに合わせてheight指定するとかできないんだよな〜』

仕様

「heightやwidthがautoのときに参考にする縦横比の値」だそうです。

実装例

webページのトップにあるみたいな横幅いっぱいの画像を作る

.mainVisual {
    width: 100vw; /* widthかheightを片方指定した上で、もう片方はautoとかに。 */
    height: auto;
    aspect-ratio: 5 / 2; /* "横/縦"。数字1つのみを指定する場合は縦=1としたときの横。 */
}

その他、Youtubeの埋め込み(iframe)を囲うdivにaspect-ratio: 16/9;を指定しながらwidth: 100%をするとレスポンシブ対応しやすいはず。