HOME > > > レスポンシブWebデザインでブラウザサイズによって画像を差し替える「Responsive Img」

レスポンシブWebデザインでブラウザサイズによって画像を差し替える「Responsive Img」

Responsive Img

ブラウザサイズによって画像を変えたい

レスポンシブWebデザインでちょっと困ってしまう事。それは画像です。
正方形に近かったり、4:3になってる画像はスマフォ対応にしてもさほど見づらくないと思います。
ですが、タイトルなど横長の画像はスマフォで見た時にとっても小さくなってしまいます。
例えば横900pxのタイトルが320pxに縮まった時は、もう読めたもんじゃありません。
ブラウザサイズが変更になったら画像を差し替えた方が、スマフォでも綺麗なサイトが表現できます。
ブラウザサイズによって画像を差し替える事ができる「Responsive Img」を使ってみましょう。

サンプルはこちら

Responsive Imgをダウンロードします

こちらのサイト「Responsive Img」からダウンロードします。

Responsive Img

html内に設置します

html設置の例です。
「jquery」「Responsive Img」「変更になるブラウザサイズ」を設置します。
以下のソースをhead内に入れてください。

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/responsiveImg.js"></script>
<script>
  $(function() {
    $(".small").responsiveImg({breakpoints:{"_small":480}});
  });
</script>

解説

上記の記述では「ブラウザのサイズが480px以下になったら画像に_smallをつけてね」という事になります。
画像の説明は次で。

2つの画像を用意する

480px以上で表示する画像と、480px以下で表示する画像を2つを用意します。
そこで画像名を以下の様にします。

・ph.jpg(480px以上で表示)
・ph_small.jpg(480px以下で表示)

上記の説明で「_smallをつけてね」というのは、「ブラウザサイズが480px以下になったらph_small.jpgになります」という意味でした。

firefox・IE8以下の場合

firefox・IE8以下の場合、そのままでは画像は変わりませんでした。
表示も画像を小さくしたバージョンが表示されています。
「Responsive Img」で設定した数字よりも大きい画像を用意すると動き的には問題無い様ですが、見た目的には画像が小さくなってしまいます。
原因は、「設定した変更ブラウザサイズよりも画像が小さい場合」に起きる現象の様です。
ここで言う画像とは「PCサイト」の方で表示される画像の事です。
上記の例で言うと・・・

・ph.jpg(横481px以上のサイズで作る)
・ph_small.jpg(横480px以下で作る)

という事になります。
chormeだと必要ない設定ですが、ブラウザの種類は様々ですので気をつけたいですね。
※サンプルはfirefox・IE8以下に対応してません。

設置完了です

以上で設置完了です。
サイズや画像名は例ですので、ご自分で使いやすい形に変更していただけたらと思います。

記事参考

Monkey Seven’s

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket