「Background Fit」は、HTMLタグに設定した背景画像の縦横比率にぴったり合ったサイズで表示する jQuery プラグインです。

jQuery プラグイン「Background Fit」とスタイルシートの background-image プロパティとの違いは、背景画像の縦横比率に合ったサイズを計算して指定したブロック要素 (またはインライン要素) の表示サイズに調整して、背景画像を全面に表示します。

スタイルシートの background-image は、指定したブロック要素 (またはインライン要素) の表示サイズは固定のまま背景画像を表示します。background-size など他のプロパティを指定すると、いろいろな表示の仕方をしますが、画像サイズによって切り抜かれた形で表示されたり、一部空白になったりします。

というわけで、ブロック要素を基準に表示される背景画像を、背景画像の縦横比率を基準に表示したらどうなるのかなぁと、jQuery プラグインを作ってみました。

デモ

デモは、 jquery.background-fit.js と background css の比較です。

デモ

つかいかた

1. jQuery 本体の設定
2. jquery.background-fit.js の設定
3. HTMLと背景画像、CSSを用意
4. Background Fit を適用
5. 動作確認

1. jQuery 本体の設定

jQuery (1.11 以上または >= 2.x 以上) をページに読み込みます。

jquery.com から jQuery 本体をダウンロード。または CDN から配信している jQuery 本体を設定します。

設定方法は「Download jQuery」から。

2. jquery.background-fit.js の設定

jquery.background-fit.js をページに読み込みます。

jquery.background-fit.min.js をダウンロードして、HTMLにスクリプトタグを以下のように設定します。

<script src="http://DOMAIN/PATH/TO/jquery.background-fit.min.js"></script>

3. HTMLと背景画像、CSSを用意

背景画像を表示するHTMLを用意します。id 属性または class 属性を設定すること。属性名はお好みで。

<div id="bg">jquery.background-fit.js</div>

CSSで背景画像を設定します。

<style>
#bg {
  background: url(http://DOMAIN/PATH/TO/sample.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>

幅 (width) を設定すると、表示サイズが調整された表示になります。

<style>
#bg {
  background: url(http://DOMAIN/PATH/TO/sample.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 300px;
  height: 300px;
}
</style>

4. Background Fit を適用

Background Fit を適用する JavaScript を記述します。HTML に設定した id 属性または class 属性を セレクタに指定して Background Fit を適用します。

<script>
$(function() {
  $("#bg").bg_fit();
});
</script>

5. 動作確認

表示を確認します。

以上。

動作条件

jQuery 1.11+ Or jQuery 2.x+

履歴

• Version 0.0.3 - 2014-06-12
  • fix in case of multiple setting
• Version 0.0.2 - 2014-05-14
  • improve bgImg object
• Version 0.0.1 - 2013-02-13
  • Initial release.

ダウンロード

Download ZIP

開発

GitHub (https://github.com/thingsym/jquery.background-fit)

ライセンス

Dual licensed under the MIT and GNU General Public License v2.0 (GPLv2) licenses.

Copyright (c) 2013-2014 by thingsym