Flexbox sur IE11: image étirée pour aucune raison?

pour éviter ce drôle de comportement, vous pouvez réinitialiser le flex-shrink biens.

Cela ressemble à un bug en dépit de ce que dit microsoft :

<'flex-shrink" >

Définit le flex facteur de rétrécissement ou négatif de la flexibilité pour le flex de l'élément. Le flex rétrécir facteur détermine la quantité de flex élément diminuera par rapport aux autres éléments dans le conteneur flex.

S'il est omis, l'élément négatif de la flexibilité est "0". Une valeur négative n'est pas valide.

Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx

img {
  max-width: 100%;
  flex-shrink: 0;
}

CSS:

img {
  max-width: 100%;
  flex-shrink: 0;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
article.post-grid .article-content {
  padding: 20px 35px;
}

HTML:

<div class="latest-posts">
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>THIS IS POST TITLE</h2>
      <p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
      <p>Recommend new contented intention improving bed performed age.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>SHORT TITLE</h2>
      <p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
    </div>
  </article>
</div>

http://codepen.io/anon/pen/KzBOvq

J'ai eu un bug similaire dans IE11.
Les styles ont été prises à partir de Bootstrap 4.1, donc, pour la fluidité des images que j'avais:

.img-fluid {
    border: none;
    height: auto;
    max-width: 100%;
}

Dans mon cas, il semble que la raison en est dans max-width: 100% donc quand je l'ai changé pour width: 100% le bug a disparu:

.img-fluid {
    border: none;
    height: auto;
    width: 100%;
}

Cette solution n'est pas pour tous les cas, mais j'espère que cela serait utile.

J'ai eu un problème avec étiré des images de produits dans IE11, et j'ai fait quelques recherches et essayé différentes choses.

C'était mon code:

.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        height: 100%;
        object-fit: contain;
        top: 0;
    }
}

J'ai alors réalisé que mon image height: 100% était le coupable de l'image redimensionnée, et j'ai tout simplement supprimé de ma taille, mais alors mon image était au dessus de mes .productImage conteneur au lieu d'être centré verticalement. J'ai introduit flex ici et il positionné par le biais d'un simple align-items: center, mais bien sûr, cela ne fonctionne pas dans IE11. J'ai aussi essayé la flex-shrink: 0 mais cela ne fonctionne pas non plus.

Ensuite, je suis allé de l'avant de sauter à l'aide de flex et j'ai essayé le classique top: 50%; left: 50%; transform: translate(-50%, -50%); mais ce n'était pas bon non plus car j'ai déjà eu une transformation dans l'utilisation de mon zoom sur le vol stationnaire effet sur l'image.

J'ai fini avec cette solution au lieu de cela:

.productImage {
    position: relative;
    overflow: hidden;

    img {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
}

Il a travaillé comme un charme