LPなどを作る時、あるセクションだけ背景画像を設置することがあります。
その画像がただのパターンとかならいいんですが、切れて欲しくない画像の場合
今まで、divやsectionに高さを指定して、画像を全て見えるようにしてました。
↑↑↑ このように、完成された画像を背景画像として出したい場合
しかしそのやり方だと、スマホ対応が難しい。
画像自体は、background-coverで画面に合わせて縮小できるけど、高さを指定してるから縦幅だけはPCの時のまま、画像だけが小さくなるというチグハグなデザインになってしまう。
高さをautoにすると、画像が切れてしまうし。（heightは背景に合わせてはくれない）
そこで、とてもいい方法をこちらのTabeppa!（たねっぱ）さんという、個性的なネーミングのサイトから教えてもらいました！！！
https://taneppa.net/responsive_background_image/
これは素晴らしい！！！
ずっと悩みの種だったんだけど、解消されましたーー！！！
感謝感謝です。
そのままコードを使わせてもらいますが
.box{
width: 100%;
height: 0;/* (画像の高さ / 画像の横幅) × 100 */
padding-top: 66.6666666667%;background: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Taneppaさんの記事を読んでもらったらわかると思いますが
私なりの補足というか蛇足というか、どうでもいい意見を付け加えておきます。
今までheight:●px;
で、背景画像の高さのサイズを書いてたんだけど、冒頭で述べたとおり、それだとレスポンシブ対応するときにとても大変。というかできない。
今まではスマホ用にタグを切り替えてました。
でも、padding-topで背景画像の高さを％で指定することによって、レスポンシブ対応できるのです。
どうやって高さを指定するのかというと、画像の幅と高さの比率で。
横幅に対して、高さは何％かということ。
それが
(画像の高さ / 画像の横幅) × 100
＝padding-top: 66.6666666667%;
ということなんですね。
例えば、
高さが３５０で横幅が６００の画像の場合、
３５０➗６００✖️１００＝５８.33333333%
というわけで、padding-top:58.3%;
と書いたら、レスポンシブ対応バッチリでした。
私の尊敬する、プログラマーの中田亨さんが、すっごくわかりやすく説明してくださいました。
↓↓↓
widthやheightの%は親要素のサイズが基準になるのに対して、padding はその要素自身のサイズが基準になる
この説明が、めっちゃしっくりくる！さすが書籍を何冊も執筆されてるだけあって、説明が上手・・・