6

background-size:coverそのため、アスペクト比を維持しながら、適用されるdivの任意のサイズに拡大縮小する背景画像の目的の効果を実現するために使用しています。なぜこの方法を使用するのですか？画像は、相関するWordPress投稿で画像として設定されているものに基づいて、PHPを介して動的にインラインCSSを使用して背景として適用されています。

したがって、すべてがうまく機能しますが、これが少なくともIE8で機能することを保証するためのフォールバックはありますか？おそらくいくつかのJavascriptの修正？

すでにバックストレッチとスーパーサイズを試しましたが、ページの背景にのみ画像を適用するため、役に立ちませんでした。

ここで実際に動作しているのを見ることができます。

4

4 に答える 4

7

IE8 以下では、幅/高さが定義された div の子として前景画像を挿入することが唯一の回避策です。

<!doctype html>
<html lang="en">
<head>
    <title>Dynamic Image Sizing</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; }
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; }
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; }
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; }
</style>
</head>
<body>

<div id="scroller">
  <!-- Insert your content here -->
  <div id="dyndiv">
    <img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" />
  </div>
</div>
</body>
</html>

それが同等でない場合は、Stu Nichollsにさらに助けを求めてください。

デモ：

ここに画像の説明を入力

于 2012-03-13T22:20:44.710 に答える
1

以前に答えを試しましたが、 background-size: cover; として機能しませんでした。予想どおり、実際には選択したサイズに画像が収まりましたが、「カバー」オプションから期待していた新しいメジャーに余分な部分がクリップされませんでした。私の解決策はここで見つかりました：http://selectivizr.com/

<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
 <!--[if (gte IE 6)&(lte IE 8)]>
   <script type="text/javascript" src="path/to/selectivizr.js"></script>
   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
 <![endif]--> 

<style>
  .with-bg-size


    {
        background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
        background-position: center;
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale'); 
it didnt work as cover is expected */
        width: 200px;
        height: 100px;


        /* Make the background image cover the area of the <div>, and clip the excess */
        background-size: cover;

      }


    </style>
    <body>

<div class="with-bg-size">Donald Duck!</div>

</body>
</html>
于 2013-05-08T13:12:20.387 に答える
1

画像のサイズを拡大するのではなく、縮小する必要がある場合、このアプローチは機能しません。Javascriptを回避するために私が見つけた最良の方法は、2つの画像を重ね合わせ、ホバーすると上の画像を透明にすることです。オリジナルのサイズ変更を含む他のすべてのアプローチ (例: background-size) は、IE では失敗するようです。

CSS:

.social-btn-container {
    width:46px;
    height:46px;
    position:relative;
    float: left;
    margin-right: 15px;
}   
.social-btn-container:hover > .top-btn {
    visibility:hidden;
}
.social-btn {
    margin:0;
    padding:0;
    border:0;
    width: 46px;
    height: 46px;
    position: absolute;
    left:0;
    top:0;
}   
.top-btn {
    z-index: 1;
}
.top-btn:hover {
    opacity: 0;
}

HTML:

<div class="social-btn-container">
    <a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
        <img src="images/icons/facebook_top.png" class="top-btn social-btn" />
        <img src="images/icons/facebook_bottom.png" class="social-btn" />
    </a>
</div>

この.social-btn-container:hover > .top-btn部分は IE quirks モードで動作しますが、これは をサポートしていないようです。ホバーopacityを使用する:hover{visibility:hidden}と、表示が非表示になると false になり、ちらつきが発生します。(外側の div も画像を配置します。) これを FF23、IE 標準および癖 (IE 10 で 7、8、および 9 をエミュレートする)、Opera、および Safari でテストしました。

于 2013-09-16T20:51:57.290 に答える
0

IE8 以下では、background:コードを分離して使用します。

-webkit 例:

background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;

-IEで試してください：

background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;

詳細はこちら: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

于 2017-01-10T13:14:58.830 に答える