ResponsifyJSは画像のなかで見せたいエリアを保持させながらレスポンシブに対応できるjQueryプラグインです。ブラウザ幅に合わせて画像が単純に縮小・拡大するのではなく、見せたい部分にフォーカスさせることが可能です。
ResponsifyJS
以下のページからResponsifyJSのデモを見ることができます。
デモではたくさんの画像が並べられています。ブラウザ幅を縮小してみると分かると思いますが、それぞれの画像でメインとなる部分を残しながら縮小していきます。
フォーカスエリアはimgタグにdata属性を用いて指定できます。画像1枚に対してdata-focus-left、data-focus-top、data-focus-right、data-focus-bottomの数値を指定できるのでとても便利ですね。
「スマホ画面だと画像全体が小さくなってメインの被写体がわかりづらい！」なんてときに活用してみてはいかがでしょうか？
というわけで、画像にフォーカスエリアを設定してレスポンシブに対応したい方は、ぜひResponsifyJSをチェックしてみてください。
ダウンロードや詳しい使い方は以下からどうぞ。
