web-dev-qa-db-fra.com

IE 11: l'image ne se réduit pas correctement dans la flexbox

J'essaie d'utiliser flexbox pour placer deux images dans une colonne. Dans ce cas, la width du conteneur div est inférieure à la width de l'image. Dans Chrome, l’image s’intègre parfaitement dans le conteneur div, mais pas dans IE, et je ne sais pas pourquoi.

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.inner {
  width: 100%;
  border: 1px solid red;
}

img {
  width: 100%;
  height: auto;
}
<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

https://jsfiddle.net/Yifei/16cpckqk/

Voici ce que j'ai dans IE 11:

htmlcsscss3flexboxinternet-explorer-11
13
yifei3212

IE11 semble avoir quelques problèmes avec la valeur initiale de la propriété flex-shrink . Si vous le définissez à zéro (il est initialement défini à 1), cela devrait fonctionner:

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
div.inner {
  flex-shrink: 0;
  width: 100%;
  border: 1px solid red;
}
img {
  width: 100%;
  height: auto;
}
<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

27
andreas

La solution acceptée a détruit mes pieds collants dans ie. J'ai donc résolu ce problème troublant avec le non-satisfaisant suivant "uniquement pour, par exemple, JS" .... La valeur px au lieu de "height: auto" a fait le tour pour moi.

 if(fuBrowser =='ie'){
  var img = $("#teaser img");
    img.each(function() {
    $( this ).css({height: $( this ).height()});
    });
  }
0
Friedrich Siever