IE8でbackground-size[cover:contain]を使えるようにするjQueryプラグイン

2015/10/06

2019/09/25

Works

IE8でbackground-size[cover:contain]を使えるようにするjQueryプラグイン

IE8ではbackground-sizeが使えない

そのそもIE8ではCSS3に対応していなため、多くの機能が使えません。
一時期はIE6がWEBデザイナーの怒りの矛先だったのですが今はその対象がIE8になりましたね。
かなりシェアは減ったとはいってもまだまだ仕事では対応しないといけないことが多いです。

…もういっそ無視したい…

使えない機能の中でもあったらいいなーと思うのがこの「background-size」

これはそのボックスの大きさに対して背景画像の大きさを設定できるというもの。

全画面表示したいときなんかは便利なんですが、IE8では対応していません。

これを擬似的に使用できるようにするのがこの「jquery.backgroundSize.js」というプラグインです。

jquery.backgroundSize.js使用方法

jquery.backgroundSize.js

上記リンクよりファイルをダウンロードして<head>~</head>に読み込ませます。

<head>
<script src="js/jquery-1.11.2.min.js"></script>
<!--[if lte IE 8]>
<script src="js/jquery.backgroundSize.js"></script>
<script>
$(function() {
$('.wrap').css('backgroundSize','cover');
});
</script>
<![endif]-->
</head>

jQueryプラグインなのでjQueryを先に読み込ませておいてください。

<!–[if lte IE 8]>~<![endif]–>の部分はIE8以下に有効という意味です。

その中にプラグインjsを読み込ませます。

指定方法は至って簡単

$(‘.クラス名‘).css(‘backgroundSize’,’種類‘);

指定したクラスに種類（cover,contain）の効果を与えるということです。

このプラグインはcover,containのみ指定できるみたいです。数値では指定できませんでした。

background-size:cover

このcoverの効果は画像の比率はそのまま画面いっぱいに引き伸ばし（または縮小）ます。

cssにbackground-posision:center center;を書いておくと画像の中心がボックスの中心にきますので全画面表示はこの設定が良いかと思います。

/*css*/
.wrap {
background:url(image.jpg) center center no-repeat;
background-size:cover;
width:100%;
height:100%;
}
/*js*/
$(function() {
$('.wrap').css('backgroundSize','cover');
});

background-size:contain

このcontainの効果は画像の比率はそのまま画面にちょうど収まる形に引き伸ばし（または縮小）ます。

/*css*/
.wrap {
background:url(image.jpg) center center no-repeat;
background-size:contain;
width:100%;
height:100%;
}
/*js*/
$(function() {
$('.wrap').css('backgroundSize','contain');
});

どちらも現行のブラウザ（chrome等）だとちゃんと表示されますが2番めはIE8だと効果が適応されていません。
IE8、もしくはエミュレーターで確認してみてください。