SPOTブログ

レスポンシブWEBデザインのサイトを作るときに便利な画像の縦横比を正方形のまま維持するjQuery作りました

最近は少しづつ「レスポンシブWEBデザイン」の手法でサイトを制作することが多くなってきました。

レスポンシブWEBデザインの基本は、media queryを使ったgrid layoutとFluid Image（画面のサイズに合わせて画像を拡大縮小してフィットさせる）だと思うのですが、画像をfruidさせるときに、縦横比が結構めんどくさい印象です。

画像の横幅はwidth:100%とかで可変にすれば良いのですが、overflow:hiddenで画像の表示範囲を指定して一部切り取りたい時などは、heightをwidthと合わせなければいけないので、CSSだけでは正直難しい印象です。

 

そこで、ウィンドウをリサイズしても画像の縦横比を正方形のまま維持するjQueryを作りましたので、ご紹介します。

 $(“.rect”).css(“width”)で横幅を取得して、$(“.rect”).css(‘height’,img_w)で高さにさっき取得した横幅を戻しているだけです。

この処理を$(windows).resize()でウィンドウのリサイズをトリガーにして動作させています。

$(“.rect”).css(‘height’,img_w)のままだと正方形ですが、img_w*2とすると縦長の長方形にしたり、縦横比は必要に応じて変えて使ってもらえばそこそこ便利かな、と思います。