web-dev-qa-db-ja.com

IEで背景サイズを機能させるにはどうすればよいですか。

IEでCSSスタイルbackground-sizeを機能させるための既知の方法はありますか？

cssinternet-explorer
188
JD Isaacks

少し遅れますが、これも役に立つかもしれません。 IE 5.5+用のIEフィルタがあり、これを適用できます。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

ただし、これは割り当てられた領域に収まるように画像全体を拡大縮小します。したがって、Spriteを使用している場合、これは問題を引き起こす可能性があります。

指定： AlphaImageLoaderフィルタ@Microsoft

312
Dan

jquery.backgroundSize.js を作成しました。1.5Kのjqueryプラグインで、「cover」および「contains」の値に対するIE 8フォールバックとして使用できます。 demo を見てください。

45
Louis-Rémi

この記事のおかげで、クロスブラウザの幸福のための私の完全なCSSは次のとおりです。

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

このコードを開発してから長い時間が経ちましたが、ブラウザの互換性を高めるために追加したいと思います。ブラウザの互換性を高めるために、これをCSSに追加しました。

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
21
Scott Dallas

あとで、でもこれは役に立つかもしれません。 background-size：coverのpolyfillとして使用できるjQuery-backstretch-pluginがあります。 jQueryでcss-background-urlプロパティを取得し、それをjQuery-backstretchプラグインにフィードすることは可能であり（そしてかなり単純で）なければならないと思います。 modernizrを使ってbackground-size-supportをテストし、このプラグインを代替として使用することをお勧めします。

Backstretch-pluginはSO here で言及されましたjQuery-backstretch-plugin-siteは here です。

同様の方法で、あなたの状況（background-size：100％）およびIE8-でbackground-sizeを機能させるjQueryプラグインまたはスクリプトを作成することができます。それであなたの質問に答えるために：はい方法はありますが、プラグアンドプレイの解決策はありません（つまり、自分でコーディングをする必要があります）。

（免責事項：私は徹底的にbackstretch-pluginを調べませんでした、しかしそれはbackground-size：coverと同じようにするようです）

5
metatron

そのための良いpolyfillがあります： louisremi/background-size-polyfill

ドキュメントを引用するには：

IEに必要なMIMEタイプを送信する.htaccessとともに、backgroundsize.min.htcをWebサイトにアップロードします（Apacheのみ - nginx、node、およびIISに組み込まれています）。

CSSでbackground-sizeを使用している場所には必ず、このファイルへの参照を追加してください。

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}
5
Dorian

IE11 Windows 7ではこれは私のために働きました、

background-size: 100% 100%;
2
Jana

あなたは本当に使いやすいIE8のためにこのファイル（ https://github.com/louisremi/background-size-polyfill “ background-size polyfill”）を使うことができます：

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
0
user5251472

私は次のスクリプトを試してみました - 

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

それは私のために働いた！

0
Bulla