Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

画像サイズをレスポンシブ化させる「imagefill.js」

なかなか便利そうなのでご紹介。レスポンシブWebデザインは画面サイズに合わせたHTMLエレメントの配置を提供するものだが、「imagefill.js」を使えばHTMLエレメント自体を画面サイズに合わせて拡大、縮小させることができる。

Demo画像を。まずはフル画面でこの状態。


画面サイズを縮小させていくとこのとおり、画像サイズも合わせて縮小していく。(わかるかな?ぜひ上記リンクからDemoを!)


表示できるグリッド数を減らしていくのがレスポンシブの基本の考え方だが、見える物のサイズを縮小していくという考え方もありだなと思った。