WEBページ内に画像を表示する際、画像表示用の領域のサイズと、実際に表示する画像のサイズとが一致しないケースというのがままあります。そのようなケースに使える、「画像をその表示領域いっぱいにフィットさせるjQueryスクリプト」を作成しました。

使い方

前述のスクリプトをjquery.imgfit.jsというファイル名で保存します。

WEBページ内にscript要素を使って読み込みます。この際、jQueryのファイルより後ろで読み込むようにしてください。

・・・
<script src="/js/jquery.1.7.0.js"></script>
<script src="/js/jquery.imgfit.js"></script>
</body>

処理を適用したいimg要素に所定のクラスを記述してください。

サンプル

留意点

• やってることは、img要素の画像を表示領域の背景画像として設定するという処理です。
• jQuery(elem).on()を使っているので、jQuery1.7以上が必要です。
• background-size: cover;やbackground-size: contain;を使っているので、IE9以降のブラウザが必要です。
• 処理実行後、本来の画像要素（img要素）は非表示化（jQuery(elem).hide()）します。このため、
  • 表示領域にwidthとheightを設定してください。
  • img要素に設定されたCSSやJSのイベントハンドラなどは無効となります。
• ページのロード後にAjaxなどで動的に生成された要素に対して処理を実行する場合は、生成したimg要素に対してimg-fit-coverイベントまたはimg-fit-containイベントをtriggerしてください。

  var $img = $("<img>"), $fig = $("<figure></figure>");
  $fig.append($img);
  $img.attr("src",src).trigger("img-fit-cover");