HTML&CSS

CSSで背景画像の比率を保ったままブラウザのサイズに合わせる方法

PAS-POLのサイトを模写コーディングしてた時に背景画像の比率を保ったままブラウザの幅に合わせるのに四苦八苦したのでまとめておきます。

背景画像の指定方法

背景画像は「background-image」にて指定可能です。

ただし、background-imageを指定しても要素の中に画像が格納されるわけではない(要素の高さが0)ので、画像は表示されません。

背景画像を表示するには要素の高さを指定しなければなりませんが、背景画像の高さを要素の高さに指定するとブラウザのサイズを変更した時にも高さが固定されてしまいます。

背景画像の比率を保ったままブラウザのサイズに合わせる方法

背景画像を指定した要素のpadding-top(padding-bottomでも良い)に「(画像の横幅 / 画像の縦幅) * 100」の値を%で指定すればOKです。(paddingを指定することで背景画像が表示される理屈はTaneppa!(たねっぱ!)さんにて紹介されています。)

またbackground-sizeにcoverを指定することで、画像の比率を保ったまま画像で要素を埋めてくれます。

CodePenにいくつかのパターンを記述してみたので、参考にしてみてください。(OKパータンはdiv1です)

See the Pen
背景画像の比率を保ったままブラウザの大きさに合わせる
by Jyu2 (@Jyu2)
on CodePen.

まとめ

  • background-imageは要素の高さが指定されていないと表示されない
  • padding-top(padding-bottom)に「(画像の横幅 / 画像の縦幅) * 100」の値を%で指定する
  • background-size: cover;も忘れずに
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す