Wie kann ich Hintergrundgröße in IE arbeiten lassen?

188

Gibt es eine bekannte Möglichkeit, den CSS-Stil background-sizeim IE zum Laufen zu bringen?

JD Isaacks
quelle
1
Welchen Effekt versuchen Sie zu erzielen?
ZippyV
@ZippV Ich habe ein Div, das ungefähr 250 Pixel breit ist. Das Hintergrundbild ist jedoch 300 Pixel breit. Ich möchte, dass das Hintergrundbild vollständig passt (Hintergrundgröße: 100%), damit es nicht abgeschnitten wird. Dann :hovermöchte ich, dass sich die Hintergrundgröße auf die volle Breite von 300 Pixel (Hintergrundgröße: Auto) ändert, um die Illusion des Zooms zu erzeugen
JD Isaacks
1
Sie können den gleichen Effekt erzielen, indem Sie ein img-Tag verwenden. Wenn Sie etwas darüber benötigen, verwenden Sie den Z-Index.
ZippyV
1
@ John erwäge, die akzeptierte Antwort zu ändern, wenn Dans Problemumgehung für dich funktioniert hat!
Pekka
@ZippyV Das IMG-Tag hat manchmal nicht benötigte Nebenwirkungen, zum Beispiel kann es ausgewählt oder mit der rechten Maustaste angeklickt werden. Diese sind manchmal in Ordnung, manchmal nicht.
Peter - Wiedereinsetzung Monica

Antworten:

312

Ein bisschen spät, aber das könnte auch nützlich sein. Für IE 5.5+ gibt es einen IE-Filter, den Sie anwenden können:

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

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

Dadurch wird jedoch das gesamte Bild so skaliert, dass es in den zugewiesenen Bereich passt. Wenn Sie also ein Sprite verwenden, kann dies zu Problemen führen.

Spezifikation: AlphaImageLoader Filter @microsoft

Dan
quelle
12
Ich frage mich, warum MS diese Funktionalität nicht einfach mit CSS implementiert hat. Vielen Dank!
Martin Andersson
2
Welche IE-Versionen unterstützen dies bitte?
29 ᆺ ᆼ
8
Wenn Sie innerhalb des Elements, das wir definiert haben, Links und Schaltflächen verwenden, funktionieren diese Links und Schaltflächen nicht. Kennt jemand eine Methode, um dies zu beheben?
Rubyprince
2
Ich musste position: relative; z-index: 999für die Eingabe einen Knopf in solchen Divs
hinzufügen
10
Die Skalierungsmethode behält das Verhältnis jedoch nicht bei. Daher ist es am besten, wenn Ihr Element das gleiche Verhältnis wie Ihr Bild hat.
Yves Van Broekhoven
45

Ich habe jquery.backgroundSize.js erstellt : ein 1,5-KByte-jquery-Plugin, das als IE8-Fallback für "cover" - und "include" -Werte verwendet werden kann. Schauen Sie sich die Demo an .

Louis-Rémi
quelle
12
Laut der Dokumentation von jquery.backgroundSize.js ist das Plugin veraltet und es wird stattdessen eine Hintergrundfüllungs- Polyfüllung empfohlen .
VOIDHand
Die aktualisierte Version funktioniert nicht mit background-position: fixed.
Ryan Burney
@ VOIDHand Sowohl der Filter als auch die Polyfüllung haben bei mir nicht funktioniert, ich habe jquery.backgroundSize für den Erfolg verwendet
Chris Marisic
21

Dank dieses Beitrags lautet mein vollständiges CSS für Cross-Browser-Glück:

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

Es ist so lange her, dass ich an diesem Code gearbeitet habe, aber ich möchte aus Gründen der Browserkompatibilität hinzufügen, dass ich dies aus Gründen der Browserkompatibilität an mein CSS angehängt habe:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Scott Dallas
quelle
@ Gaurav123 versuchen-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
honk31
5
Dadurch zeigt mein IE8 das Hintergrundbild zweimal an - eines mit skalierten Abmessungen und das zweite mit dem großen Hintergrund ohne Größe.
Arekk
ie7: Sieht OK aus, kann aber nicht mehr auf Links klicken. (Warum ie7? Govt Websites sehr langsam zu aktualisieren)
Robbie Matthews
5

Auch später, aber das könnte auch nützlich sein. Es gibt das jQuery-Backstretch-Plugin, das Sie als Polyfill für Hintergrundgröße: Cover verwenden können. Ich denke, es muss möglich (und ziemlich einfach) sein, die CSS-Hintergrund-URL-Eigenschaft mit jQuery abzurufen und sie dem jQuery-Backstretch-Plugin zuzuführen. Es wird empfohlen, mit modernizr die Unterstützung der Hintergrundgröße zu testen und dieses Plugin als Fallback zu verwenden.

Das Backstretch-Plugin wurde hier auf SO erwähnt. Die jQuery-Backstretch-Plugin-Site ist hier .

In ähnlicher Weise können Sie ein jQuery-Plugin oder ein Skript erstellen, mit dem die Hintergrundgröße in Ihrer Situation (Hintergrundgröße: 100%) und in IE8- funktioniert. Um Ihre Frage zu beantworten: Ja, es gibt einen Weg, aber atm gibt es keine Plug-and-Play-Lösung (dh Sie müssen selbst etwas programmieren).

(Haftungsausschluss: Ich habe das Backstretch-Plugin nicht gründlich untersucht, aber es scheint dasselbe zu tun wie Hintergrundgröße: Cover)

Metatron
quelle
5

Dafür gibt es eine gute Polyfüllung : Louisremi / Hintergrundgröße-Polyfüllung

So zitieren Sie die Dokumentation:

Laden Sie backgroundize.min.htc zusammen mit dem .htaccess, der den vom IE benötigten MIME-Typ sendet, auf Ihre Website hoch (nur Apache - er ist in Nginx, Node und IIS integriert).

Fügen Sie überall dort, wo Sie Hintergrundgröße in Ihrem CSS verwenden, einen Verweis auf diese Datei hinzu.

.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);
}
Dorian
quelle
Diese Polyfüllung funktioniert einfach. Hintergrundgröße: Cover oder enthalten in IE8. Kein Muss, keine Aufregung.
Jimlongo
Dieser Ansatz unterstützt sowohl containals auch cover. Es enthält 5,7 KB nicht sehr schlecht, da es in einem Netzwerkpaket übertragen wird.
SMMousavi
2

In IE11 Windows 7 hat das bei mir funktioniert,

background-size: 100% 100%;
Jana
quelle
0

Ich habe es mit folgendem Skript versucht -

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

Es hat bei mir funktioniert!

Bulla
quelle
für welche Version?
Nihiser