IE 11: l'Image n'est pas l'échelle vers le bas correctement au sein de flexbox

Je suis en train d'utiliser flexbox pour placer deux images dans une colonne. Dans ce cas, le width de la div conteneur est plus petite que la width de l'image. Dans google Chrome, l'image s'adapte parfaitement dans le div conteneur, mais il n'est pas dans IE, et je ne sais pas pourquoi.

CSS:

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

HTML:

<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/

C'est ce que j'ai dans IE 11:

IE 11: l'Image n'est pas l'échelle vers le bas correctement au sein de flexbox

Je ne peux pas expliquer cela, mais vous pouvez toujours définir une hauteur de 100% sur l'image et la définir manuellement la hauteur de la flexbox, si ça peut aider 🙂
Pour une raison quelconque, cela est également fixé par la mise en flex: 0 0 auto sur div.inner (ou juste flex-shrink: 0). C'est bizarre parce que dans le but de laisser la div shrink vous déclarez qu'il ne devrait pas diminuer.

InformationsquelleAutor yifei3212 | 2017-02-11

31

IE11 semble avoir quelques difficultés avec la valeur initiale de la flex-shrink de la propriété. Si vous le réglez à zéro (c'est initialement fixé à 1), cela devrait fonctionner:

CSS:
```
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;
}
```
HTML:
```
<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>
```
- Vous faire sonner comme paramètre flex-shrink: 0; est la bonne façon de s'assurer d'une bonne valeur initiale. Mais la logique de la valeur ici est 1 comme je l'ai mentionedmême si la 0 arrive à le résoudre.
- Je n'ai pas dit que c'est de la bonne manière, ma réponse est une solution possible au problème. Je n'ai pas vu votre commentaire en répondant... sry
- Merci, très pratique.
- Tu es la bienvenue, content d'avoir pu aider 🙂
InformationsquelleAutor andreas
0

La solution retenue détruit mon collant pieds de page dans ie. Donc, j'ai résolu cette question perturbante avec les éléments non satisfaisant "seulement pour ie JS"... . Le px de la valeur plutôt que la "height:auto" a fait le tour pour moi.
```
 if(fuBrowser =='ie'){
  var img = $("#teaser img");
    img.each(function() {
    $( this ).css({height: $( this ).height()});
    });
  }
```
InformationsquelleAutor Friedrich Siever

Vous devez vous connecter pour publier un commentaire.