More than 5 years have passed since last update.

レスポンシブコーディングでの縦横比問題の解決策

Last updated at 2016-06-26Posted at 2016-06-24

最近レスポンシブコーディングやスマホのリキッドデザインなんかで縦横比を保ちたいってことが多いですよね。　　
その実装方法を紹介します。

#HTML

まずは普通にHTMLを書きます。
ポイントはinnerをboxで囲んでいるところ。
innerは今回赤くしている部分でboxはその親要素になっています。

<div id="sample-box">
<div class="sample-inner">
<p>4:3</p>
</div>
</div>

#CSS

続いてCSSを書きます。

#sample-box{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 75% 0 0;
}

padding: 75% 0 0;
ここがポイントです。

padding-top(%) = 高さ / 横幅 * 100

この式で求めた数値をpadding-topに設定します。
あとはinnerに下記のようなCSSを設定すれば縦横比が4：3になってくれます。

#sample-box .sample-inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
background:  #b40d0d;
}