【CSS】背景画像で高さを保ってレスポンシブにして画像を表示させたい

HTMLからじゃなくCSSで画像を表示させたい

CSSで画像を表示させる場合は基本的にbackgroundで背景画像として表示させることが一般的ですよね。

アイコンだと擬似要素で背景画像として表示させるのが便利なのですが、普通はHTMLでimgタグで表示させるような大きな画像はそれではうまくいきません。

今回は訳あってHTMLを触りたくなかったので、
「CSSだけで画像の高さを保ってレスポンシブに表示できないかな？」
と思い色々やってみました。

・完成イメージ

高さを持たせるためにpaddingをつける

高さをつけるためにheightをつけると高さが固定されてしまい、ウィンドウの幅が変わったときに画像の端が切れてしまいます。
なのでpaddingで余白をつけて高さをつけます。

CSSのコード

HTML側には背景画像が入る部分へimgクラスをつけて、中身は空にしています。
paddingは画像サイズによって変化します。

paddingの計算方法

これで計算した余白をpaddingで%を使ってつけるとレスポンシブで高さが可変します。

スマホサイズにしたときもこの通りです。

少しでも参考になれば幸いです。