![](https://labodamonde.com/wp-content/uploads/2018/11/labo-1-def-e1543541763454.png)
縦長の写真をイイ感じにレスポンシブ対応にしよう!
![](https://labodamonde.com/wp-content/uploads/2018/11/2-bikkuri-1-e1543542235759.png)
![](https://labodamonde.com/wp-content/uploads/2018/11/labo-1-bikkuri-e1543541665142.png)
レスポンシブ対応したWEBサイトでも…
例えば、レスポンシブ対応したWordPressのテーマを利用していれば、メディアを挿入しただけでレスポンシブ対応になります。divで囲んだりclassを付けたりする手間もありません。
ブラウザのサイズを広げたり縮めたりすれば、その動きに伴って、画像も縮小拡大してくれるのが分かります。
横長写真
![ダンボー 一族](https://labodamonde.com/wp-content/uploads/2019/03/css-responsive-vertical-img-01.jpg)
もちろん縦長の写真だってレスポンシブ対応できている。しかし、写真がどーーーんとデカくなっちゃう。
縦長写真
![芝生のダンボー](https://labodamonde.com/wp-content/uploads/2019/03/css-responsive-vertical-img-02.jpg)
![](https://labodamonde.com/wp-content/uploads/2018/11/2-bikkuri-1-e1543542235759.png)
![](https://labodamonde.com/wp-content/uploads/2018/11/labo-1-gakkari-e1543541715607.png)
レスポンシブ対応のWEBサイトでは、横幅を基準にして画像のサイズが決まります。なので、写真の縦横の比率を維持しつつ表示しようとすれば、縦長の写真ほど大きく表示されてしまうんですよね。
解説図ならコレでも構いませんが、写真を並べた時にサイズ感がいちいち変わってしまうのは、統一感がなくてカッコ悪い。なので…
「縦長写真の高さ = 横長写真の横幅」になるように表示したい!
こんな感じですね。
![芝生のダンボー](https://labodamonde.com/wp-content/uploads/2019/03/css-responsive-vertical-img-02.jpg)
上の表示は、横長の写真とサイズ感が同じになっているはずです。
スポンサードリンク
![](http://labodamonde.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif)
実践!
divタグで画像を入れる正方形の箱を作り、この箱の高さを画像の高さの基準にする
これにより、縦長の画像の高さ = 箱の高さ = 箱の横幅 = 横長の画像の横幅 になります。
![縦長写真のレスポンシブ対応](https://labodamonde.com/wp-content/uploads/2019/03/css-responsive-vertical-img-03.jpg)
DEMO
下は簡単なDEMO。参考にしてみて。
See the Pen MxRdYY by kumalabo (@kumalabo) on CodePen.
右上の「CODEPEN」ロゴをクリックすると、大きな画面で確認できます
CSSをコピペ
まず、画像とそれを囲むdivタグの設定が必要。下記内容をコピーして追加CSSにペーストして下さい。
設定場所
外観 > カスタマイズ > 追加CSS
htmlの書き方
htmlは、次のようにいじります。
1. imgタグを divタグで囲む
2. divタグにクラス「class="tate-pic"」を付ける
divタグは、ショートコードに登録しておけば呼び出しも簡単で使いやすいですね。
![](https://labodamonde.com/wp-content/uploads/2018/11/2-egao-1-e1543542185714.png)