Comment puis-je faire de fond de taille de travail dans IE?

Est-il un moyen connu pour rendre le style CSS background-size travail dans IE?

Quel effet vous essayer d'obtenir?
J'ai un div qui est d'environ 250 pixels de large. mais l'image de fond est 300px de large. Je veux que l'image d'arrière-plan pour adapter complètement (background-size:100%) de sorte qu'il n'est pas se couper. Puis sur :hover je veux que le fond de la taille de changer à la pleine 300px de largeur (background-size:auto) pour créer l'illusion de zoom
Vous pourriez obtenir le même effet en utilisant une balise img. Si vous avez besoin de quoi que ce soit sur le dessus de cela, utiliser le z-index.
envisager une modification de la accepté de répondre si Dan la solution qui a fonctionné pour vous!
La balise IMG est parfois inutile d'effets secondaires, par exemple, il peut être sélectionné ou clic droit. Parfois, ce sont OK, parfois pas.

InformationsquelleAutor JD Isaacks | 2010-06-07

312

Un peu en retard, mais il pourrait aussi être utile. Il y a un IE filtre, pour IE 5.5+, que vous pouvez appliquer:
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
```
Cependant, cette échelle de l'ensemble de l'image pour l'ajuster à la zone allouée, donc si vous êtes à l'aide d'un sprite, cela pourrait provoquer des problèmes.

Spécifications: AlphaImageLoader Filtre @microsoft
- Je me demande pourquoi MS n'a pas simplement mettre en œuvre que functionarlity à l'aide de CSS. Merci beaucoup!
- Qui versions IE l'appui de cette s'il vous plaît?
- Si vous utilisez des liens et des boutons à l'intérieur de l'élément que nous avons définis, les liens et les boutons ne fonctionnent pas. Quelqu'un sait-il une méthode pour résoudre ce problème?
- J'ai dû ajouter position: relative; z-index: 999 pour l'entrée, un, bouton à l'intérieur de ces divs
- Cela a fonctionné pour moi, mais maintenant mon ancre et tels à l'intérieur de la div que j'ai donné l'image d'arrière-plan pour ne fonctionnera pas. C'est comme quelque chose qui est au-dessus d'eux. Quand j'enlève les filtres qu'ils fonctionnent à nouveau normalement. Toutes les suggestions sur ce?
- renvoyer mon commentaire ci-dessus...j'ai ajouté de style a {position: relative; z-index: 999} pour faire les ancres de travail. z-index doit être d'un plus grand nombre.
- La méthode scale permet de ne pas garder le ratio mais.. il est Donc préférable que votre élément est le même que le ratio de votre image.
- c'est ce que fait ma balise d'ancrage question: fond: #fff url(image.jpg) no-repeat center fixe\0/; /* IE8 HACK */
- Ce que ce fait est-il réellement des lieux de ce filtre fil arrière-plan. Si l'image d'arrière-plan est-il encore le répéter, et puis celui-ci est placé sur elle. Rien de partage le même niveau que le fond sera en dessous de cette nouvelle couche (même si à la fois le calque est transparent). Cela empêche l'interaction avec ces éléments. La méthode va bien s'étirer l'image, mais à quel prix? Trop hackish pour moi, mais une approche agréable néanmoins.
- Intéressant de noter que si elle est appliquée à la body ou html éléments, cette propriété peut briser le défilement, liens, et autres page interactions.
- Merci pour cette solution, il ne fonctionne pas mais le seul problème est qu'il change le ratio d'aspect de l'image d'origine. Est-il un moyen de contourner cela?
- Rajendran, mettre ce code dans le style que les références de votre image d'arrière-plan (dans votre feuille de style)
- fonctionne comme un charme pour ie 8 et la version précédente. mais devez être prudent lorsque le référencement d'une image src
- Il semble être important lorsque vous collez ceci dans votre CSS, avant que la "normale" d'arrière-plan spécifications ou après. Assurez-vous de vérifier avec tous les navigateurs et appareils.
- parce que c'est un héritage IE fonction! Essayez d'utiliser -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
- j'ai donc besoin d'utiliser à la fois les choses sous un classe ou id. et il ira chercher automatiquement correspondant au navigateur, correct ?
- Oui. La question posée était précisément pour IE c'est pourquoi ma réponse est pour les anciennes versions de IE uniquement. Découvrez css-tricks.com/perfect-full-page-background-image "Génial, Simple, Progressive CSS3" pour plus d'informations.
- ok l'ami, Merci. Je suis juste à la recherche de ce lien...veux Juste confirmer que nous ne l'option pour le navigateur safari-il ainsi ?
- Que faire si les images sources sont en ligne et je les veux tous "couverte"?
InformationsquelleAutor Dan
45

J'ai créé jquery.backgroundSize.js: 1,5 K plugin jquery qui peut être utilisé comme un IE8 secours pour "couvrir" et "contenir" des valeurs. Jetez un oeil à la démo.
- Selon jquery.backgroundSize.js la documentation, le plugin est obsolète, et ils recommandent background-size-polyfill à la place.
- La version mise à jour ne fonctionne pas avec background-position: fixed.
- Le filtre et la polyfill n'a pas fonctionné pour moi, j'ai utilisé jquery.backgroundSize pour le succès
InformationsquelleAutor Louis-Rémi
21

Grâce à ce post, mon css pour la croix-navigateur bonheur est:
```
<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>
```
Il a été si longtemps depuis que j'ai travaillé sur ce morceau de code, mais je tiens à ajouter pour plus de compatibilité avec les navigateurs que j'ai ajouté à mon CSS pour plus de compatibilité avec les navigateurs:
```
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
```
- essayez -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
- cela rend mon ie8 pour afficher l'image de fond à deux reprises avec l'échelle des dimensions et de la deuxième, le grand pas de la taille d'arrière-plan.
- ie7: l'air bien, mais ne peut plus cliquer sur les liens. (Pourquoi ie7? Gouv sites très lent à mettre à jour)
InformationsquelleAutor Scott Dallas
5

Même plus tard, mais cela pourrait être utile aussi. Il y a jQuery backstretch-plugin que vous pouvez utiliser comme un polyfill pour background-size: cover. J'imagine que ça doit être possible (et assez simple) pour attraper les feuilles de style css background-propriété de l'url avec jQuery et le nourrir à la jQuery-backstretch plugin. Une bonne pratique serait de tester pour le fond de la taille du support avec modernizr et de l'utilisation de ce plugin comme une solution de repli.

La backstretch-plugin a été mentionné sur DONC ici.Le jQuery-backstretch-plugin-site est ici.

De la même manière, vous pourriez faire un jQuery-plugin ou un script qui fait le fond de la taille d'un travail dans votre situation (background-size: 100%) et IE8-. Donc, pour répondre à votre question: Oui, il y a un chemin, mais l'atm, il n'y a pas de plug-and-play " (c'est à dire que vous avez à faire un peu de codage de même).

(disclaimer: je n'ai pas examiner la backstretch-plugin à fond, mais il semble faire la même chose que background-size: cover)

InformationsquelleAutor metatron
5

Il y a une bonne polyfill pour que: louisremi/background-size-polyfill

De citer la documentation:
Télécharger backgroundsize.min.htc à votre site web, avec la
.htaccess qui va envoyer le mime-type requis par IE (Apache ne —
il est construit dans nginx, nœud et IIS).

Partout background-size dans votre CSS, ajouter une référence à
ce fichier.
```
.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);
}
```
- Cette polyfill fonctionne, tout simplement. background-size:cover ou le contenir dans IE8. Pas muss, pas de chichi.
- cette approche prend en charge les deux contain et cover. Il contient 5.7 KB pas très mauvais, car il sera de transfert dans un réseau de paquets.
InformationsquelleAutor Dorian
2

Dans IE11 Windows 7 cela a fonctionné pour moi,
```
background-size: 100% 100%;
```
InformationsquelleAutor Jana
0

vous pouvez utiliser ce fichier
(https://github.com/louisremi/background-size-polyfill “background-size polyfill”) pour IE8 qui est vraiment simple à utiliser:
```
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
```
InformationsquelleAutor

J'ai essayé avec le script suivant -

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

Il a travaillé pour moi!

pour quelle version?

InformationsquelleAutor Bulla

Vous devez vous connecter pour publier un commentaire.