Garder le rapport de l'image à l'aide de max-width et max-height dans IE 11

Que j'essaie de faire une image pour l'adapter à l'intérieur d'un conteneur tout en conservant c'est le rapport de taille. L'image doit prendre de la hauteur ou de la largeur en fonction de l'orientation. Ma solution fonctionne sur tous les navigateurs que j'ai testé mais IE11(travaux en 10 et 9 étonnamment).

Dans IE 11 le recadrage de l'image sur la droite. Je voudrais un pur css manière si possible et je ne se soucient pas de la centrant.

Voici le JSFiddle : https://jsfiddle.net/wagad0u8/

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/1000x100">
  </a>
</div>

<div class="owl-item" style="width: 465px;">
  <a class="img-flux" href="page1.html">
    <img alt="omg" src="http://placehold.it/400x780">
  </a>
</div>

.img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align:middle;
}
#content-block *:last-child {
    margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
    height: 100%;
}
.img-flux {
    background-color: #ECECEC;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.owl-item{
  float:left;
  height:300px;
  margin-bottom:50px;
}
InformationsquelleAutor Mosset Jérémie | 2017-01-05
  1. 31

    Ce qui semble être un bug dans IE11: Rapport De Bug. L'ajout de flex: 1 (comme dans le rapport)

    .img-flux img {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
}

    fonctionne pour moi. Flexbox pour le parent semble ok, donc même centrage est facile.

    Une autre option est 

    flex: 0 0 auto;  /* IE */
object-fit: scale-down; /* FF */

    sur le img, au lieu de flex: 1 , l'augmentation de la compatibilité avec Firefox. Voir les commentaires et rapport de bug pour plus d'info.

    • Cela fonctionne! Vous avez juste à utiliser un css hack pour cible IE 11 comme il gâchera choses sur au moins FF.
    • Ha! N'était pas sûr après, j'ai écrit cela, parce que ce foutu choses pour moi aussi! Et puis, de nouveau, n'a pas dans IE. La marche sur la glace!
    • Curieusement, cela fonctionne pour moi, sans même l'ajout de flexbox pour les parents.. Et ne pas causer des problèmes dans d'autres navigateurs (FF est bien pour moi contrairement à Mosset)
    • flexbox est facultative, mais souvent utile dans ce contexte. Mais encore, il est très étrange, car il me semble dépendent d'autres circonstances, si il fonctionne ou pas...absolut position de parent pourrait être un problème, mais je suis à nouveau pas sûr du tout 😉
    • Pour éviter l'aspect ratio aller, j'ai besoin de flex: 0 0 auto sur les images, comme mentionné dans le rapport de bogue. Merci pour le lien.
    • Le Rapport de Bug lien ne fonctionne plus. Microsoft a pris sa retraite "Microsoft Connect". Je devine qu'ils ont encore l'article caché dans l'un des autres sites, mais je n'ai aucune idée de laquelle ils ne se sentent pas nécessaire de fournir une mise à jour de l'URL de l'élément référencé.
    • aarrff. très mauvaise. une recherche rapide na pas révéler utile. heureux si quelqu'un trouve l'aiguille dans la botte de foin...
    • Il semble que Microsoft Connect n'est pas archivé quelque part(voir ce problème). Je ne pouvais pas le trouver sur la wayback machine, ni les navigateurs cache(Yahoo, google et bing). Il pourrait être trouvable ailleurs Peut-être warrick serait capable de le trouver, mais je ne suis pas d'espoir.

    InformationsquelleAutor benzkji
  2. 0
    .img-flux img {
    border: 0;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: relative;
    transition: all 0.3s;
    margin: 0 auto;
    float: none;
    display: block;
    vertical-align: middle;
}
    • Je vais voir si il fonctionne quand je vais obtenir mes mains sur un windows. Mais si je me souviens bien de ce faire des images verticales à sortir de leur parent.
    • C'est une bonne pratique sur le Débordement de la Pile d'ajouter une explication quant à pourquoi votre solution devrait fonctionner. Pour plus d'informations, lisez Comment Répondre.
    • En effet, elle crée des images verticales comme ils obtiennent 100% de la largeur et de la hauteur. De sorte qu'ils ne gardent pas leurs ratios.
    InformationsquelleAutor Tushar
  3. -4

    Utilisation

    vw - for width instead of %

    et

    vh - for height instead of %

    pris en charge dans les versions plus anciennes comme IE11.

    https://jsfiddle.net/wagad0u8/1/

    De n'appliquer le code modifié IE10+ utilisation:

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
.img-flux img {
max-width : 100vw;
max-height : 100vh;
}
    • Votre violon ne fonctionne pas sur IE 11. L'image conserve la radio, mais sort de sa div. Il semble que cela prend de la fenêtre d'affichage de la largeur de la place de la div parent de largeur.
    • je ne sais pas pourquoi on devrait utiliser la fenêtre d'affichage de la hauteur/largeur?
    InformationsquelleAutor CodingSnow