縦長の写真をレスポンシブ対応にすると、表示サイズがやたら大きくなる問題を解決する方法

クマ

今回は、縦長の写真をレスポンシブ対応化するときに発生する問題点を解決するよ！

縦長の写真をイイ感じにレスポンシブ対応にしよう！

ぽん

イイ感じとは！？

クマ

今時のWordPressのテーマを使っていれば、レスポンシブ対応自体は既にできてるよね。でも、縦長の写真の場合は難アリ！

レスポンシブ対応したWEBサイトでも…

例えば、レスポンシブ対応したWordPressのテーマを利用していれば、メディアを挿入しただけでレスポンシブ対応になります。divで囲んだりclassを付けたりする手間もありません。

ブラウザのサイズを広げたり縮めたりすれば、その動きに伴って、画像も縮小拡大してくれるのが分かります。

もちろん縦長の写真だってレスポンシブ対応できている。しかし、写真がどーーーんとデカくなっちゃう。

ぽん

PCで見ると強烈！！

クマ

スクロールしないと画像全体を見渡せない程デカイ

レスポンシブ対応のWEBサイトでは、横幅を基準にして画像のサイズが決まります。なので、写真の縦横の比率を維持しつつ表示しようとすれば、縦長の写真ほど大きく表示されてしまうんですよね。

解説図ならコレでも構いませんが、写真を並べた時にサイズ感がいちいち変わってしまうのは、統一感がなくてカッコ悪い。なので…

「縦長写真の高さ = 横長写真の横幅」になるように表示したい！

こんな感じですね。

上の表示は、横長の写真とサイズ感が同じになっているはずです。

実践！

divタグで画像を入れる正方形の箱を作り、この箱の高さを画像の高さの基準にする

これにより、縦長の画像の高さ = 箱の高さ = 箱の横幅 = 横長の画像の横幅 になります。

DEMO

下は簡単なDEMO。参考にしてみて。

See the Pen MxRdYY by kumalabo (@kumalabo) on CodePen.

右上の「CODEPEN」ロゴをクリックすると、大きな画面で確認できます

CSSをコピペ

まず、画像とそれを囲むdivタグの設定が必要。下記内容をコピーして追加CSSにペーストして下さい。

htmlの書き方

htmlは、次のようにいじります。

1. imgタグを divタグで囲む

2. divタグにクラス「class="tate-pic"」を付ける

divタグは、ショートコードに登録しておけば呼び出しも簡単で使いやすいですね。

ぽん

今回の内容は以上です！うまくできたかな？