【レスポンシブ】背景画像を縦横比を保持したまま可変させる話【background-image】

レスポンシブデザインは画像の可変が必須。
imgタグで挿入する場合にはそうそう悩むことはないが、background-imageを使用する場合。背景画像を可変させようにも、縦横比が崩れてしまう。

background-size:contain;
background-size:cover;
background-size:100%;

などを用いると、横幅は可変することができるが、高さをうまく保つことができない。
そんな場合の対応法をまとめてみました。

背景画像を置く要素に擬似要素を付加する

CSSはこちら

肝は空白のブロック要素を擬似要素として付加し、「padding-top」を設定する点。
「padding-top」の値は背景に設定する画像の縦幅÷横幅のパーセント表示となる。

例えば背景画像の比率が、「横：縦=4：3」の場合。
背景画像を置く要素の比率も「横：縦=4：3」としたい。
そこで「::before」に「padding-top:75%;」を指定することで、画像の比率分の高さを保持したまま可変させることができる。

ちなみにpadding-bottomでも可。
これで空白要素の背景画像も、縦横の比率を保持した高さで可変させることができる。

画像の縦横幅を素早く計算したい方はこちらへ
もう悩まんでもええ！！画像や要素の縦横幅・縦横比自動計算ツール

 - CSS野郎