[jQuery]IE8でCSS3のbackground-size:coverを扱う
IE8の対応はまだ切り捨てるわけにはいかず、最近よく使用するCSS3のbackground-size:cover;を擬似的に扱う事が出来るjQueryプラグイン「jquery.backgroundcover」をご紹介致します。ライセンスはMITライセンスとなっております。
全画面やwidth:100%での背景画像
最近のデザインでフルスクリーンで背景画像をいっぱいまで表示するものが多い印象です。
その際、コーディングではCSS3のbackground-size:cover;をよく使われると思います。
ですが、IE8ではCSS3に対応していないので非常に困りますw
まだ日本ではIE8のシェアはそれなりにあるため、IE8を切り捨てるという選択は中々難しいです。
私が働いている会社では少なくともIE8は当分サポートです。。。なかなか実装面で厳しいものも多くなってきました;;
backgroundSize.js
以前は、「backgroundSize.js」というものを使用してIE8のカバーをしていましたが、このプラグインに脆弱性かエラー等で
DEPRECATED(非推奨)となってしまいました。また実際にIE8でリサイズ等をした時にfunctionエラーが発生し、使用するのは危険です。
「backgroundSize.js」の作者が次なるバージョン「background-size-polyfill」なるものを作成してしております。
こちらは.htcファイルを使い、background-sizeを使えるようにしているようです。
backgroundcover
htcファイルではローカルでのチェックなどが面倒なので、jQueryで動作する代わりのものを探していました。
で今回ご紹介するのが「jquery.backgroundcover」です!
IE8の場合は、imgタグで置き換えて動作します。
また、background-imageでも、自動的に読み込んでimgタグに吐き出してくれマス。
IEの条件付きコメントアウトハックなどでIE8以下などにスクリプトを掛けてよく使っています!
使用方法
jQueryの読み込み/コード
<script src="common/js/jquery-1.9.1.min.js"></script> <script src="common/js/jquery.backgroundcover.js"></script> $(function(){ $('.background').backgroundcover({ safearea: "10%,50%,10%,10%" }); });
HTMLはこちら
<div class="background"></div>
CSS
.background { width: 100%; height: 300px background: url(1100x400.png) left top no-repeat; background-size: cover; }
デモ
実際に使用しているデモを作ってみました。
よかったらIE8などで試してみてください。
ライセンス
ライセンスはMITライセンスです。