問題
解決策
可変の高さ
中の要素が高さを持たなかったり、中の要素がそもそもない場合、それを囲う要素の高さは0となってしまいます。そこで「padding-top」を使うことで、高さが可変になるように設定してみましょう。
「padding-top: 〇〇%;」と設定することで、親要素の幅を100%として、それに応じた高さを表示してくれます。
スマートフォンでの背景画像の例
まず、下記画像は、幅800px、高さ400pxです。
この画像と同じ幅800pxのdivで囲い、背景画像として呼び出す場合、高さを400pxで設定してしまっては、PCは問題ありませんがスマートフォンで高さ400pxのままとなり、画像自体は切れる形で表示されてしまいます。
なのでスマートフォンでもちょうどの比率となるようにするため、「padding-top」を活用します。
DEMOはこちら
ぜひスマートフォンの実機でご覧ください。
内訳はこちらです。
HTML
<div class="pt-box">
<div class="inner-box"></div>
</div>
CSS
@media print, all and (min-width: 768px) { .pt-box{ width: 800px; margin: 0 auto; } } .pt-box .inner-box{ width: 100%; padding-top: 50%; background-image: url(画像のパス); background-position: center center; background-repeat: no-repeat; background-size: cover; }
ポイント!
「padding-top: 〇〇%;」と設定することで、親要素の幅(width)を100%とした、相対的なpx数値で表示できるようになります。
様々な場面で活用できますので、ぜひお試しください。
コメント