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


188

background-sizeIEでCSSスタイルを機能させる既知の方法はありますか?


1
どんな効果を得ようとしていますか?
ZippyV

@ZippV divの幅は約250ピクセルです。ただし、背景画像の幅は300pxです。背景画像が完全に収まるようにしたいので(background-size:100%)、切り取られません。次に:hover、背景のサイズを全幅300ピクセル(background-size:auto)に変更して、ズームの錯覚を作成します
JD Isaacks

1
imgタグを使用して同じ効果を得ることができます。その上に何か必要な場合は、z-indexを使用してください。
ZippyV

1
@Johnは、Danの回避策がうまくいったら、受け入れられた回答を変更することを検討してください!
Pekka

@ZippyV IMGタグには、選択したり右クリックしたりできるなど、不要な副作用が発生する場合があります。これらは時々大丈夫ですが、時々そうではありません。
peterh-モニカを2014年

回答:


312

少し遅れますが、これも役に立つかもしれません。適用できる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')";

ただし、これにより、画像全体が割り当てられた領域に収まるように拡大縮小されるため、スプライトを使用している場合、問題が発生する可能性があります。

仕様:AlphaImageLoader Filter @microsoft


12
MSがCSSを使用してその機能を実装しなかったのはなぜでしょうか。どうもありがとう!
マーティンアンダーソン

2
これをサポートするIEのバージョンを教えてください。
12 2012年

8
これを定義した要素内でリンクとボタンを使用している場合、それらのリンクとボタンは機能しません。誰かがこれを修正する方法を知っていますか?
rubyprince 2012年

2
position: relative; z-index: 999このような
div

10
ただし、拡大縮小方法では比率が維持されません。したがって、要素と画像の比率が同じであることが最善です。
Yves Van Broekhoven、

45

私はjquery.backgroundSize.jsを作成しました:「カバー」および「含む」値のIE8フォールバックとして使用できる1.5K jqueryプラグイン。見ていデモを


12
jquery.backgroundSize.jsのドキュメントによると、プラグインは非推奨であり、代わりにbackground-size-polyfillを推奨しています
VOIDHand

更新されたバージョンは、では動作しませんbackground-position: fixed
Ryan Burney 2013

@VOIDHandフィルターもポリフィルも機能しなかったので、jquery.backgroundSizeを使用して成功させました
Chris Marisic

21

この投稿のおかげで、クロスブラウザーの幸せのための私の完全な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;

@ Gaurav123試してみる-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
honk31

5
これにより、IE8で背景画像が2回表示されます。1つは拡大された寸法で、もう1つはサイズのない大きな背景です。
arekk

ie7:見た目は問題ありませんが、リンクをクリックできなくなりました。(なぜie7?政府のサイトは更新が非常に遅い)
ロビーマシューズ

5

後でさえ、これも役に立つかもしれません。background-size:coverのポリフィルとして使用できるjQuery-backstretch-pluginがあります。私は、css-background-urlプロパティをjQueryで取得し、それをjQuery-backstretchプラグインにフィードすることが可能(かつかなり単純)である必要があると思います。modernizrでbackground-size-supportをテストし、このプラグインをフォールバックとして使用することをお勧めします。

backstretch-pluginはSOでここに言及されていました。jQuery-backstretch-plugin-siteはこちらです。

同様に、状況(背景サイズ:100%)およびIE8-で背景サイズを機能させるjQueryプラグインまたはスクリプトを作成できます。だからあなたの質問に答える:はい、方法はありますが、ATMにはプラグアンドプレイのソリューションはありません(つまり、自分でコーディングを行う必要があります)。

(免責事項:私はbackstretch-pluginを徹底的に調べていませんが、background-size:coverと同じように機能しているようです)


5

そのための良いポリフィルがあります:louisremi / background-size-polyfill

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

backgroundsize.min.htcを、IEが必要とするMIMEタイプを送信する.htaccessとともにWebサイトにアップロードします(Apacheのみ— nginx、ノード、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);
}

このポリフィルは機能します。background-size:coverまたはIE8に含まれます。ムスも大騒ぎもない。
jimlongo

このアプローチはとの両方containをサポートしcoverます。1つのネットワークパケットで転送されるため、5.7KBはそれほど悪くありません。
SMMousavi 2016

2

IE11 Windows 7では、これでうまくいきました。

background-size: 100% 100%;


0

私は次のスクリプトで試しました-

.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;
}

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


どのバージョン用?
nihiser 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.