Secura Vita

Category: Works , jQuery
Works

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

IE8でbackground-size[cover:contain]を使えるようにするjQueryプラグイン
  • twitter
  • facebook
  • はてな
  • line

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の効果は画像の比率はそのまま画面いっぱいに引き伸ばし(または縮小)ます。

background-size: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');
});
  1. jquery.backgroundSize.js有効のDEMO
  2. jquery.backgroundSize.js無効のDEMO

background-size:contain

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

background-size:cover
/*css*/
.wrap {
background:url(image.jpg) center center no-repeat;
background-size:contain;
width:100%;
height:100%;
}
/*js*/
$(function() {
$('.wrap').css('backgroundSize','contain');
});
  1. jquery.backgroundSize.js有効のDEMO
  2. jquery.backgroundSize.js無効のDEMO

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


おもしろかった・役に立った
  • twitter
  • facebook
  • はてな
  • line
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ

Leave a comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ソースコードを記入する場合は [code]~[/code] でくくってください。
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください