読者です 読者をやめる 読者になる 読者になる

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

最近レスポンシブコーディングやスマホリキッドデザインなんかで縦横比を保ちたいってことが多い。
そこで縦横比保つ方法のメモ
デモは下にあります。

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;
}

DEMO

4:3