指定された大きさを満たすようにいい感じに画像を表示「imagefill.js」
imagefill.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。
レスポンシブなWebサイトを構築する際に考えなければならないのが画像などのリソースです。サイズが変わってそのまま縮小すると見栄えがとても悪い場合があります。そこで遣ってみたいのがimagefill.jsです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.05.1377563665.png)
デモです。幅が広い場合はこのように表示されます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.07.1377563669.png)
幅が狭くなるとこんな感じに。高さは変わっていません。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.10.1377563673.png)
このくらいの幅がちょうどいいかも知れません。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.19.1377563677.png)
様々なサイズでのデモ。グリッドで並べたり、高さや幅を色々変えて表示が確認できます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.43.1377563682.png)
画面の幅を変更しました。グリッドがいい感じにぴったりと並びます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-19 12.05.49.1377563686.png)
さらに縮めてスマートフォンサイズにグリッドの数が変わり、さらに表示部分もダイナミックに変わっています。
imagefill.jsはレスポンシブに対応しており、画面幅を変更するとダイナミックに表示が切り替わるようになっています。画像の中央部分を軸に幅や高さに合わせていい感じに表示してくれるので手軽に使えそうです。
MOONGIFTはこう見る
レスポンシブにおける弱点の一つが画像です。スマートフォンやタブレット、デスクトップなどそれぞれにおいて最適な画像の表示は異なります。さらにRetina対応を考えるとリソースサイズが膨らみがちで、関係のないユーザにとっては単に重たいサイトになってしまいます。
かつてガラケーであったように個々の機種、機能に合わせた画像の最適化処理が必要になっているのかも知れません。imagefill.jsはそれを簡易的ながらもいい感じに処理してくれます。本格的な対応の前に導入すると良さそうです。