エリアの比率を変えずにレスポンシブ対応させる方法

CSS

2021年05月17日2024年06月26日

レスポンシブ対応に必須の、
エリアの縦横比を維持したまま可変させる場合の計算方法を紹介します。

今回は、一般的な写真サイズ（L版）と同じ比率のエリアに
いらすとやさんからお借りした正方形の風景イラストを
エリアいっぱいに表示させたいと思います。

計算式
実装
まとめ

計算式

まず、設定したいエリアのサイズを調べます。
今回の場合、L版のサイズは
89 × 127 ミリです。

次に、サイズの比率を計算します。
比率は縦の長さ / 横の長さで求められます。

実際に計算してみると、

89 / 127 = 0.7007874

このようになります。
数値を求めたところで、早速実装にうつります。

実装

HTML

<div class="wrap_ratio_area">
<div class="ratio_area"></div>
</div>

</div>

CSS

.wrap_ratio_area{
    max-width: 500px;
    margin: 0 auto;
}
.ratio_area{
    width: 100%;
    padding-top: 70.07874%;
    background: #000 url(city_kabukichou.png) center/cover no-repeat;
    /* 今回は画像の透過部分が黒で表示されるよう、背景色も指定しています。 */
}

.wrap_ratio_area{

max-width: 500px;

margin: 0 auto;

}

.ratio_area{

width: 100%;

padding-top: 70.07874%;

background: #000 url(city_kabukichou.png) center/cover no-repeat;

/* 今回は画像の透過部分が黒で表示されるよう、背景色も指定しています。 */

}

プレビュー

比率が保たれたまま拡大縮小されるので、
ブラウザの幅を変えて見てみてください。

HTMLはいたってシンプルで、
.ratio_areaを.wrap_ratio_areaで囲っただけです。

.ratio_area内に画像を表示します。
横幅100%に対し、padding-topに先ほど求めた数値を％に直して当てはめています。
※背景画像のトリミングについては、こちらに詳しく書きました。
CSSで画像をトリミングする｜nico MEMO

.wrap_ratio_areaには、表示する最大幅を設定しておきます。
（デバイス問わず画面いっぱいで表示したいときには不要です。）
直接.ratio_areaに横幅を設定するとエリアの比率が変わってしまうので
気をつけてください。

まとめ

以上、エリアの比率を変えずに可変させる計算方法をご紹介しました。
計算方法は、大事なのでもう一回言っておきます。
縦の長さ / 横の長さです！
YouTube画像やGoogle Mapsの埋め込みなど
多くの場面で応用できるので、ぜひ覚えておきましょう！