CSSで指定した縦横比を維持する

要素をpositionで絶対配置にした場合、その要素は親要素の高さに含まれなくなります。
親要素の高さを固定値で指定してもよいのですが、レスポンシブサイトだと画面幅に応じて縦横比を維持して高さを変更したい場合があります。
今回はこの縦横比を維持する方法を試してみます。

対応方法1

個人的によくやっていた方法ですが、維持したい縦横比の透過画像を用意して、領域を確保する方法です。

HTML

<div class="section">
	<img src="bg.png" width="100%">
	<div class="deco01"></div>
	<div class="deco02"></div>
</div>

.deco01と.deco02は表示確認用に入れているだけなので、実際に使用する場合は無くてよいです。

CSS

.section {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	border-bottom: #000000 1px solid;
}
.section img {
	display: block;
}
.deco01 {
	position: absolute;
	top: 20%;
	left: 20%;
	width: 20px;
	height: 20px;
	background: #E74C3C;
}
.deco02 {
	position: absolute;
	bottom: 20%;
	right: 20%;
	width: 20px;
	height: 20px;
	background: #3498DB;
}

bg.pngで高さを確保するようにしています。
縦横比を維持するデモページ1
　

対応方法2

空divを配置して、領域を確保します。

HTML

<div class="section_wrapper">
	<div class="section">
		<div class="section_inner"></div>
		<div class="deco01"></div>
		<div class="deco02"></div>
	</div>
</div>

CSS

.section_wrapper {
	max-width: 1200px;
	margin: auto;
	border-bottom: #000000 1px solid;
}
.section {
	position: relative;
	width: 100%;
	padding-top: 41.66667%; /* 縦(500px) / 横(1200px) * 100 */
}
.section_inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

縦横比を維持するデモページ2