問題 × 解決策

padding-topで、高さを持たない要素に親の幅に相対した高さを持たせる

問題

高さを持たない要素に高さを可変で設定したい。

解決策

「padding-top」で、親要素の幅(width)に対してのパーセンテージで設定を行う。

 

可変の高さ

中の要素が高さを持たなかったり、中の要素がそもそもない場合、それを囲う要素の高さは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数値で表示できるようになります。

様々な場面で活用できますので、ぜひお試しください。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

six + ten =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧