<div class="responsive-background">
ここに画像が表示されます
</div>.responsive-background{
width: 100%; background-image: url('../img/mv.avif'); /* 画像のURLを指定してください */
background-repeat: no-repeat; background-size: cover;
background-position: center; aspect-ratio: 16 / 9; /* アスペクト比を保持してレスポンシブ */aspect-ratio: 1 / 1;
aspect-ratio: 4 / 3;
のように比率を変えれば、画像の比率も変わります。
旧CSS（padding-topを使用する場合）
.responsive-background{
width: 100%; height: 0; /* (画像の高さ / 画像の横幅) × 100 */
padding-top: 50%; /* 2:1のアスペクト比 */ /*
padding-top: 56.25%; */ /* 16:9のアスペクト比の場合 */
background-image: url('../img/mv.avif'); /* 画像のURLを指定してください */
background-repeat: no-repeat; background-size: cover; background-position: center;
}
aspect-ratioが出てくるまでは、こちらのやり方が一般的でした。
こちらはheightを0にして、padding-top（bottomでもいけます）で高さを保つように設定。
paddingは50％や56.25%のように%で指定することで、親要素のwidthを基準に比率を保ったまま可変してくれるという特性があるのでそれを利用している。