スキップしてメイン コンテンツに移動

IE8でCSS3の「background-size: cover;」対策

【About】

CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置（大概は縦か横が切り取られる）してくれるとても素晴らしいスタイルです。
ところが残念なことにIE8では対応していません。
しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。
デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。（ポリフィルというやつ）
その方法を以下に提案します。


【方針】

モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。
IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。
（IE8用に複数の背景画像を用意する必要があります。）


【HTML】

<!--ヘッダーあたりで-->

<script src="/path/to/jRespond.js"></script>・・・※

・・・

<div id="myArea"></div>・・・ここに背景画像を表示

・・・

※　jRespond.js（IE8用に設置）
ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの
https://github.com/ten1seven/jRespond


【CSS】（モダンブラウザはこれで表示）

#myArea {

    background: url(/path/to/image/back.jpg) no-repeat center top;

    background-size: cover;

    ・・・

}

・・・



@media (min-width: 1200px) {

  #myArea {

      height:500px;

  }

}

@media (min-width: 992px) and (max-width: 1199px) {

  #myArea {

      height:400px;

  }

}

・・・


【JavaScript】（IE8はこれで対応）

$(document).ready(function () {



  //jRespond settings

  var jRes = jRespond([

  {

    ・・・

  }, {

    label: 'sm-device',

    enter: 768,

    exit: 991

  }, {

    label: 'md-device',

    enter: 992,

    exit: 1199

  }, {

    label: 'lg-device',

    enter: 1200,

    exit: 10000

  }]);



  jRes.addFunc([

  {

    breakpoint: 'lg-device',

    enter: function () {

      if (navigator.userAgent.match(/msie [8.]/i)) {

        $('#myArea').css('background-image', 'url(/path/to/image/backLg.jpg)');

      }

    },

    exit: function () {

    }



  }, {

    breakpoint: 'md-device',

    enter: function () {

      if (navigator.userAgent.match(/msie [8.]/i)) {

        $('#myArea').css('background-image', 'url(/path/to/image/backMd.jpg)');

      }

    },

    exit: function () {

    }



  },{

    ・・・

    }



  }]);

  ・・・

});


【補足】 

IE6,IE7,IE8でもCSS3のbackground-sizeプロパティをCSSハックできる
「jquery.backgroundSize.js」
http://louisremi.github.io/jquery.backgroundSize.js/demo/
というものがありますが、どうやらIE8等の場合、背景画像ではなく、imgタグに返還して表示しているようなので、試したところ表示が崩れてしまいました。
上記JSで問題なく表示できればそれの方が簡単で良いと思います。

以上
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する 方法 普通にやると、 「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」 などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript コード hoge.com（親） <html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0...
コメントを投稿
続きを読む

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー（http://◯◯◯.com/?aaa=bbbの?以下）からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。 【呼び出し元】（ウェブページ、インデックステンプレートなどから） <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】（インデックステンプレートなどで） <mt:Ignore><!--自分のカテゴリ（ディレクトリ名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore><!--自分のカテゴリー（ラベル名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") {     $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") {     $my_category_label = "ふがふが"; } else if () {     ... } echo $my_category_label; ?>...
コメントを投稿
続きを読む

HTMLの要素を下揃えする方法

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。 【よく見る方法は...】 ・親要素に「position:relative;」 ・子要素に「position:absolute;」、「bottom:0;」 とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。 【JavaScriptでの実現方法（考え方）】 上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。 「D」=「A」-「B」-「C」 この「D」を要素２の「margin-top」に追加してあげます。 今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。 【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素１").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素２").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素２").css("margin-top", heightD + "px");...
コメントを投稿
続きを読む