web-dev-qa-db-fra.com

Conserver le rapport d'image en utilisant la largeur maximale et la hauteur maximale IE 11

J'essaie d'obtenir une image qui tienne dans un conteneur tout en conservant son rapport de taille. L'image doit prendre toute la hauteur ou la largeur en fonction de l'orientation. Ma solution fonctionne sur tous les navigateurs que j'ai testés mais IE11 (fonctionne étonnamment dans 10 et 9). 

Dans IE 11, l’image est rognée à droite. Si possible, j'aimerais une méthode de css pure et je me fiche de la centrer.

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;
}
csscss3cross-browserinternet-explorer-11responsive
13
Mosset Jérémie

Cela semble être un bogue dans IE11: Rapport de bogue . Ajout de flex: 1 (comme dans le rapport)

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

travaille pour moi. La Flexbox pour le parent semble bien, donc le centrage est facile.

Une autre option est 

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

sur la img, au lieu de flex: 1, augmentant la compatibilité avec Firefox. Voir les commentaires et les rapports de bogues pour plus d'informations.

28
benzkji
.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;
}
0
Tushar