Adaptive Image

  • 2013-01-19 (土) 10:10 初版作成
    2013-02-09 (土) 15:47 最終更新

Matt Wilcox 氏による http://adaptive-images.com/ のテクニックに基づき、画像フィールドからデバイスに適したバージョンの画像を提供します。このモジュールが提供する "Adaptive" エフェクトを追加した画像スタイルを適用すると、対応する画像 URL からデバイスに適応したサイズの画像が取得されるようになります。具体的な画像サイズは、エフェクトのオプションで指定するブレークポイントの横幅になります。

画像スタイルが動作する Web サイトであれば動作しますが、対象デバイスの解像度を判定するためにクライアント側で JavaScript が有効になっている必要があります。また、このモジュールが検出するのは、ウィンドウのサイズではなくデバイスの画面サイズなので、パソコンでブラウザをリサイズしても取得される画像のサイズは変わりません。

使用例

このモジュールによる "Adaptive" エフェクトを適用した画像スタイルで画像を表示する例。ブレークポイントは "960, 740, 480" の 3 つを指定しているので、デバイスの画面サイズに応じてそれぞれ横幅が 960px、740px、480px の画像が取得される(はず)。

Adaptive Image のスタイルを適用した画像

関連ブログ記事: 
該当する記事は現在のところありません。

更新履歴

  • 2013-02-09 (土) 15:47

DISQUS コメント