CSSのbackgroundで表示させた背景画像の縦横比を維持したままレスポンシブ対応させるTIPS。
【CSS】背景画像の縦横比を維持したままレスポンシブ対応
backgroundの特性を知っている前提で話を進めていきますことご了承ください。
backgroundで背景画像を指定する際は、前提としてその背景画像を表示させたい要素に高さを持たせる必要があります。（理由はググってください）
これを、幅の可変に合わせ高さを変更させる、つまり縦横比率を維持したまま可変に対応させるTIPSが以下です。
例として『bg』というクラスが付与されたdiv要素に背景画像を指定します。
<div class="bg"></div>.bg {
background-image: url(https://hogehogehoge.jpg);
background-size: cover;
padding-top: ◯◯%;
}本来要素の高さを指定するところを、padding-topをパーセント指定することで可変する高さを指定します。
このパーセントの求め方は、元画像の 高さ ÷ 幅 × 100 で算出できます。
こうすることで、背景画像の縦横比を維持したままレスポンシブ対応が可能になります。
