解説
IE8ではCSS3のbackground-sizeの指定が効きませんが、 jquery.backgroundSize.jsというjQueryプラグインを使用すると、 背景のbackground-size指定ができます。 jquery.backgroundSize.jsはこちらでダウンロードしてください。
HTML
<div class="main"> <h1>jquery.backgroundSize.jsの実験</h1> <h2>IE8で閲覧してください。</h2> <p><a href="http://louisremi.github.io/jquery.backgroundSize.js/demo/">jquery.backgroundSize.js</a>を使うとIE8でもbackground-sizeの指定ができます。</p> <div class="bg"> <p>jquery <br>処理なし</p> </div> <div class="bg contain"> <p>jquery処理あり <br>contain</p> </div> <div class="bg cover"> <p>jquery処理あり <br>cover</p> </div> </div>
CSS
.main { width: 960px; margin: 0 auto; border: 1px solid #ccc; padding: 50px; text-align: center; margin: 50px; vertical-align: top; } .bg { width: 200px; height: 200px; background: url(images/dog.png) no-repeat; background-size: contain; border: 1px solid #ccc; display: inline-block; text-align: left; margin: 20px; padding: 10px; }
jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">$.debugBGS = true;</script> <script src="./jquery.backgroundSize.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(".contain").css({backgroundSize: "contain"}); $(".cover").css({backgroundSize: "cover"}); }); </script>