backgroundに背景画像を設定する場合、paddingにて高さ調節をしているかと思う。
ただ、こういうケースは当然PCで調節を行っているため、レスポンシブ時にはひどいことになる。pannding単位をVHなどにし一気にレスポンシブも見据えて調節する方法もあるが、実際にはなかなか良い塩梅にはならない。
そういったときはメディアクエリにて一旦paddingをクリアし、再度高さを指定してあげれば解決する
CSS
1 2 3 4 5 6 7 |
/*—— SP画像サイズ調整 ——*/ @media (max-width: 760px){ #sp_img{ padding: initial; height: 500px; } } |
※クラス指定だと効かないケースがあったため、ID指定に。paddingを入れている要素に指定してください。
コメントを残す