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

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

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

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

とこれが 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