概要

背景画像(background-image)のサイズの等倍になるよう要素のサイズを調整します。途中で切れると妙に見えるようなデザインで効果を発揮します。

ダウンロード

基本的な使い方

.gpTile()を実行すると背景画像のサイズを取得し、背景画像をちょうど表示しきるだけのサイズに変更します。対象要素の現在サイズは下回りません。

$(elem).gpTile();

縦方向だけに適応する場合は、 .gpTile()にオプションを与えます。

$(elem).gpTile({ direction: 'y' });

デモ

デモ1 : 基本的なもの

Demo 1

  • 背景画像がぴったり表示されるようになります。

リファレンス

.gpTile([settings])

  • settings … {Object} 設定。以下のキーと値を持てる:
    • direction … {String} "x"にすると横方向のみ調節する。"y"にすると縦方向のみ調節する。"xy"にすると両方向を調節する。初期値は"xy"
    • height … {Number} 画像の高さ。height, widthの両方を省略した場合は、画像サイズを自動で取得する。
    • width … {Number} 画像の幅。height, widthの両方を省略した場合は、画像サイズを自動で取得する。

その他

ライセンス

  • MIT License
    • 無償で利用できます。商用利用も可能です。
    • 転載や改造、再配布が可能です。
    • コード内に記載の著作権表示は変更できません。
    • どのような問題が発生しても、一切の保証はありません。

利用時に連絡は不要ですが、もしご連絡頂ければ、利用実績として掲載させて頂くかもしれません。

対応ブラウザー

  • IE 6以上
  • Firefox
  • Chrome
  • Safari
  • Opera

リポジトリ

更新履歴

2011/10/21 – 1.0
  • 公開