レスポンシブデザインでも崩れない！CSSだけアスペクト比を固定させる方法

レスポンシブデザインのサイトが多くなってきたことで、縦横のアスペクト比を維持したままのボックスを作りたいことがでてくるでしょう。
そんなときは下記のコードでアスペクト比を固定したままレスポンシブデザインに対応させることができます。

<div id="wrapper">
	<div id="content">テキスト</div>
</div>
<style>
#wrapper {
	position: relative;
	width: 100%;
}
#wrapper:before {
	content:"";
	display: block;
	padding-top: 56.25%; /* 高さ÷横幅（アスペクト比を16:9で固定したい場合は56.25%） */
}
#content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
</style>