ウィンドウリサイズに応じて要素をサイズ調整させるjQueryプラグイン


今更ながら、ちょっとしたjQueryのプラグインを作りました。タイトルの通り、ウィンドウサイズに応じて要素のサイズを自動調整するプラグインです。

本当はCSSでやらないといけない内容なんですが、どうしてもスクリプトでやる必要があったので作りました。

仕様

基準となるウィンドウ幅に対する要素の幅を決めておき、そこからの差分を実際の幅に反映させます。例えば基準となるウィンドウ幅が1280で、要素の幅が60だったとき、

  • ウィンドウwidth=1280 => 要素width=60
  • ウィンドウwidth=1281 => 要素width=61
  • ウィンドウwidth=1282 => 要素width=62
  • ウィンドウwidth=1279 => 要素width=59
  • ウィンドウwidth=1278 => 要素width=58

・・・という感じにサイズを自動調整します。

実装

※現状width(幅)の自動調整しか実装してませんが、height(高さ)にも簡単に対応できると思います。

上記プラグインを読み込んだら、次のような感じで使用することができます。

どうしてもJavascriptでリサイズしないといけない場合なんかにご利用ください。

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください