JavaScriptプログラムに関する各種メモ書き

IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン

CSS3で追加された background-size。値は以下のとおり指定します。

<b>auto</b> 自動的に算出される(初期値)
<b>contain</b> 背景領域に収まる最大サイズになるように背景画像を拡大縮小する
<b>cover</b> 背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
<b>xxx px</b> 背景画像の幅・高さを指定する
<b>xxx %</b> 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

とこれが Windows IE8 7 6 ではこのプロパティは認識されません。

そこで以下のjQueryプラグイン

■ jquery.backgroundSize.js

(要 jQuery バージョン1.7.0以降 )

http://louisremi.github.com/jquery.backgroundSize.js/demo/

■ 使い方(<div class="hoge">に { background-size : cover; } を適用する。)

<script type="text/javascript" src="jquery.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="jquery.backgroundSize.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('div.hogehoge').css({backgroundSize: "cover"});
    });
    </script>
<![endif]-->

関連エントリー

No.872
05/30 10:08

edit

jQuery