レスポンシブデザインでも崩れない!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>
お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。