jQuery2015/10/062019/09/250WorksIE8で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>に読み込ませます。{$('.wrap').css('backgroundSize','cover');});</script><![endif]--></head>jQueryプラグインなのでjQueryを先に読み込ませておいてください。8]>~<![endif]–>の部分はIE8以下に有効という意味です。その中にプラグインjsを読み込ませます。指定方法は至って簡単$(‘.クラス名‘).css(‘backgroundSize’,’種類‘);指定したクラスに種類(cover,contain)の効果を与えるということです。このプラグインはcover,containのみ指定できるみたいです。数値では指定できませんでした。background-size:coverこのcoverの効果は画像の比率はそのまま画面いっぱいに引き伸ばし(または縮小)ます。center;を書いておくと画像の中心がボックスの中心にきますので全画面表示はこの設定が良いかと思います。{$('.wrap').css('backgroundSize','cover');});jquery.backgroundSize.js有効のDEMOjquery.backgroundSize.js無効のDEMObackground-size:containこのcontainの効果は画像の比率はそのまま画面にちょうど収まる形に引き伸ばし(または縮小)ます。{$('.wrap').css('backgroundSize','contain');});jquery.backgroundSize.js有効のDEMOjquery.backgroundSize.js無効のDEMOどちらも現行のブラウザ(chrome等)だとちゃんと表示されますが2番めはIE8だと効果が適応されていません。IE8、もしくはエミュレーターで確認してみてください。jQueryコメント(0)おもしろかった・役に立った▼ブログランキング参加中!クリック!▼おすすめ関連の記事wordpress:ダウンロードしたテーマは絶対カスタマイズしちゃダメ!カスタマイズは子テーマを使え!wordpress:マルチサイト化する手順wordpress:マルチサイトで複数の子サイトの記事をまとめて親サイトに日付順表示させるwelcart:数量入力inputボックスをtextからnumberにするwelcart:カートのサムネイルサイズを変更するwordpress:メンテナンスモードを固定ページを使って作成。Form:セレクトに「選択してください」を追加する。確認画面や送信メールの調整も。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。