兵庫県三田市でホームページ製作をしているゴリラドットです。

cssのbackgroundで画像を配置、でもそのままだとパソコンだったりスマホだったり、画面横幅が変わるとbackgroundを設定しているオブジェクトの横幅も変わってしまってあれよあれよと縦横比が崩れちゃう、悲しい…。という事になります。

出来ればbackgroundに設定した背景画像もレスポンシブ対応して、横幅が狭まれば高さもそれに応じて縮む、そんな縦横比固定のbackgroundにしたいですよね。

はい、てことでここではbackgroundの背景画像を縦横比固定にしてレスポンシブ対応、というのを紹介したい。

 

解決方法

いきなり解決方法から。

 

css

#ushiro-gazou{
background-image:url("back.jpg");
width: 100%;
padding-bottom: 56.25%;
}

 

「width:100%」と「padding-bottom: 56.25%」がキモ。

今回の例だと16:9の縦横比（ヨコ16、タテ9）でレスポンシブしてくれます。

ほかには背景画像の縦横比が4:3なら（3÷4=0.75）なので「padding-bottom: 75%」にすればOK。

 

padding-bottomに「%」でどうして？

もう上の方法でbackgroundのレスポンシブ対応はできてるんで、ここから下は何でそうなるのかが気になる人だけ読んでくださいね。

なんでpadding-bottomに「%」指定することで縦横比が固定になるんでしょうか。

 

padding-bottomの「%」はwidthに対しての「%」

そう。padding-bottomって縦方向、高さの設定じゃないですか。

だからそんなpadding-bottomに「%」を指定したら当然高さに対する%になる、と思うわけです。…しかし！これが大きなミステイク。

実はcssのpadding-bottomを「%」指定するとこれは要素の幅、widthに対しての「%」になるんです。

上で紹介したcssだと「width:100%」だから当然横幅は100、それに対して「padding-bottom:56.25%」なんで高さは56.25になる、ってわけです。

 

すっごいテクニカルな方法だけど知ってるとcssでできる実装の幅がものすごい増えるんでぜひ覚えておきましょう。ちなみにpadding-bottomじゃなくてpadding-topでもおんなじことができます。

 

まとめ

cssのbackground-imageを縦横比固定でレスポンシブ対応する方法を紹介しました。

結局padding-bottom（もしくはpadding-top）に「%」を指定すれば縦横比固定のレスポンシブ対応背景画像が出来上がるのでした。

参考にしてみてくださいね。