レスポンシブで要素の比率を保持する

画面サイズを変更した際に、要素のアスペクト比を保持する方法をメモ。

サンプルコード

4:3の比率でリサイズに対応してみます。

HTML

<div class="aspect">
	<div class="aspect-box"></div>
</div>

CSS

.aspect {
	position: relative;
	width: 100%;
	padding-top: 75%; /* 4:3の場合 3 / 4 * 100 */
}
.aspect-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: red;
}

比率に応じて.aspectのpadding-topの値を変更します。
アスペクト比を保持するデモページ