縦横比を保持したまま可変

使い方

画像の横と縦の長さを使用します。

背景画像も画像比率を保持して可変させたい

背景画像を画像のように縦横比を維持して可変させたいと思ったことはありますか？

背景画像はbackground-imageで設定しますが、画像サイズを縦横比で可変させたい場合にはcontainやcoverだけではできません。

背景画像はコンテンツではなく、あくまで背景や壁紙のような扱いなのでコンテンツの幅と高さの領域分しか表示されません。
それを活かして、padding-topを％値で設定することによって、幅によって高さが可変する領域を作り出すことができます。このコンテンツの背景に画像を設定することで縦横比が保たれたまま可変させることが可能となります。