サイズ可変で縦横比固定のブロック要素をcssのみで実現する方法

Htmlでサイズ可変で縦横比固定のブロック要素を実現する方法を模索していたところ、
ちょっと独特な方法ですが可能なようです。

こちらのページに書かれていました。

日本語訳がちょっとおかしなことになっているので転載。

以下は幅によって高さが決まるタイプのコード。

html

<div class="aspectwrapper">
	<div class="content">
		内容…
	</div>
</div>

css

.aspectwrapper{
	position: relative;
}
.aspectwrapper:after{//beforeでもよい
	padding-top: 75%;//幅に対する高さの割合
	display: block;
	content: "";
}
.aspectwrapper > .content{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

aspectwrapperというクラスの幅をどのような値にしても、cssの5行目で指定したpadding-topを元に高さが決まる。

上記コードは4:3の場合の例です。

padding-topをパーセントで指定した場合の算出基準は親要素の横幅となるようです。

Box modelより引用:

‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’
Value: <padding-width> | inherit
Initial: 0
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Percentages: refer to width of containing block
Media: visual
Computed value: the percentage as specified or the absolute length

These properties set the top, right, bottom, and left padding of
a box.

つまり、縦横比を4:1にしたい場合は
padding-top: 25%;
とすれば、横幅の4分の1の高さが確保されます。

因みにコード例ではブロック要素に対して適用していますが、
display: inline-block;
を指定した要素に対しても効くはず。

果たして、使用機会はあるでしょうか…

広告

t87r について

趣味:トランペット・釣り・コーディング JavascriptとGAE/Pythonを勉強中。
カテゴリー: Web Design タグ: , パーマリンク

サイズ可変で縦横比固定のブロック要素をcssのみで実現する方法 への1件のフィードバック

  1. ピンバック: 背景画像のサイズに応じて要素の高さを可変させたい。 | devLog

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中