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

スポンサーリンク

※本サイトにはプロモーションが含まれています

CSS

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

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

使用する画像:
夜の歌舞伎町のイラスト | かわいいフリー素材集 いらすとや

計算式

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

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

実際に計算してみると、

89 / 127 = 0.7007874

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

実装

HTML

CSS

プレビュー

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

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

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

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

まとめ

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

コメント

タイトルとURLをコピーしました