レスポンシブWEBデザインのサイトを作るときに便利な画像の縦横比を正方形のまま維持するjQuery作りました | 名古屋のホームページ制作なら株式会社SPOT

最近は少しづつ「レスポンシブWEBデザイン」の手法でサイトを制作することが多くなってきました。 レスポンシブWEBデザインの基本は、media queryを使ったgrid layoutとFluid Image（画面のサイズに合わせて画像を拡大縮小してフィットさせる）だと思うのですが、画像をfruidさせるときに、縦横比が結構めんどくさい印象です。 画像の横幅はwidth:100%とかで可変にすれば良いのですが、overflow:hiddenで画像の表示範囲を指定して一部切り取りたい時などは、heightをwidthと合わせなければいけないので、CSSだけでは正直難しい印象です。 そこで、ウィンドウをリサイズしても画像の縦横比を正方形のまま維持するjQueryを作りましたので、ご紹介します。 jQuery(function($){ //.rectの縦横比をレスポンシブに合わせて調整 func