既存画像の簡便なレスポンシブ対応

Hello! This is . …ということで前回の続きです(^^;

Benの職場のWEBサイトは、昨月レスポンシブWEBデザインに変更しました。デザインはがしたのですが、レスポンシブにした最大の理由は、デバイスごとにコンテンツを作るのが面倒くさいからです。「スマホ用とPC用に同じ内容のページを2つ作ってください」なんて言おうものなら、ブーイングの嵐ですから(^^;

そういう中、既存ページについてはこれまで、tableタグでレイアウトがされていた部分が多かったのですが、それをdivタグに後々変換してもらうようお願いしています。でも、その中の画像がもし大きい場合、画面サイズも、親の入れ物であるdivの幅も無視して画像の幅分しっかりと占領するので、普通に記載するとスマホのような狭い画面では画像が一部しか表示されず、画面からはみ出します。

20160318a.png
そこで、前回はmax-widthを指定して、画面幅がPCなどで広い場合は等倍表示、狭い場合は全幅という指定をしました。ご覧の画像の一番上は幅指定なしで原寸表示、その下はwidth:100%のみなので画面幅の趣くままに無駄に拡大されます。そして3番目が前回実施のmax-widthと併用する方法です。これだと、無駄にでかくならないしスマホなどの小さいときには適宜縮小されていいのですが、画像のサイズに合わせてその都度最大幅を指定しないといけません。

ということで前置きが長くなりましたが、前回の続きでmax-widthの設定を画像ごとにしなくても適正サイズで表示するための方法です。色々方法はあるのですが、今回も手軽で便利なjQueryでやってみました。ネットで2,3か所調べて目的に合っているのを若干カスタマイズしました。jQuery本体の設置方法はこちらからどうぞ。

    
これをHTMLファイルのbodyの最後に入れます。はじめにjQuery本体を読み込むのをお忘れなく。内容はクラス名imgboxの子孫のもともとの画像幅が、親要素の幅以上だったら画像幅を親要素幅にするというものです。

20160318b.png
このように並べましたが一番下が今回設置したjQuery版です。表示後の画面サイズ変更には対応していませんが、スマホなど固定サイドでの表示では問題ないでしょう。
     '設定なし
     '前回
    
'今回
画像のタグはご覧のとおりです。divで囲う必要がありますが、それでもコードも短く、自動でサイズを調整してくれるので便利ですね。画像はdivなどに入っていることが多いので、既存画像をレスポンシブ対応するのは、class="imgbox"を付与する作業だけで済みそうです。

この記事へのコメント


この記事へのトラックバック