• RSS

[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

IE7、IE8 のブラウザでもCSS3 の background-size:containbackground-size:cover を使用するためのjQuery プラグインが jquery.backgroundSize です。

そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。

jquery.backgroundSize ファイルのダウンロード

IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」
以下のサイトより jquery.backgroundSize のファイルをダウンロードします。

プラグイン提供先のサイトが jquery.backgroundSize を利用したデモページになっていますので、イメージを掴みやすいと思います。


background-size プロパティについて

CSS3 の background-size については 背景画像のサイズを変更できるプロパティ「background-size」 の記事でも紹介していますので、合わせて参考にしてみてください。

ちなみに background-size の値は以下のようになっています。
auto自動算出(初期値)
contain縦横比は保持。背景領域に収まる最大サイズに拡大縮小
cover縦横比は保持。背景領域を完全に覆う最小サイズに拡大縮小
pxpxで直接数値を指定
%%で直接数値を指定


background-size:contain

<head> 内に jquery ファイルと一緒に jquery.backgroundSize.js ファイルを設置しますが、IE8 以下に対応させるので <!–[if lte IE 8]> で括るようにします。
<script src="./jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="./jquery.backgroundSize.js"></script>
<script>
$(function() {
$("div.contents").css({backgroundSize: "contain"});
});
</script>
<![endif]-->
.contents の要素に対してCSS3 の background-size:contain を適用させる例です。
<style>
.contents	{
width:auto;
height:360px;
background-image:url(./images/images01.jpg);
background-repeat:no-repeat;
background-size:contain
}
</style>
<div class="contents"></div>
CSS の記述ですが、背景の画像を指定した上でモダンブラウザ用にbackground-size:contain を適用させます。

background-size:contain のデモ


background-size:cover

続いて .contents の要素に対して CSS3 の background-size:cover を適用させる例です。
<script src="./jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="./jquery.backgroundSize.js"></script>
<script>
$(function() {
$("div.contents").css({backgroundSize: "cover"});
});
</script>
<![endif]-->
先の例と同様に、モダンブラウザ用に background-size:cover を指定します。
<style>
.contents	{
width:auto;
height:360px;
background-image:url(./images/images01.jpg);
background-repeat:no-repeat;
background-size:cover
}
</style>
<div class="contents"></div>

background-size:cover のデモ


jquery.backgroundSize の注意点

jquery.backgroundSize を使う上でちょっとした注意点がありますので、過去に経験した事例も交えてまとめました。

background-size: で % 指定すると動かない模様

contain、cover はIE7、8 でも効いてくれますが、% 指定だと動かないようです。

background-size:50% のような使い方をするサイトの場合は、IE7、8 対応は厳しいかな…と思います。


background プロパティの取り扱いに注意

プラグインファイル内にも以下の通り記載されていますが、

doesn’t work with multiple backgrounds (use the :after trick)
doesn’t work with the “4 values syntax” of background-position
doesn’t work with lengths in background-position (only percentages and keywords)
doesn’t work with “background-repeat: repeat;”
doesn’t work with non-default values of background-clip/origin/attachment/scroll


例えば background-position:50% 50% のように background-position に数値を指定すると動いてくれません。

background-position:top center のように指定すれば動いてはくれますが、IE7、8 用にレイアウトを別途補正しないといけない場合があります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す