web-dev-qa-db-fra.com

Flexbox sur IE11: une image étirée sans raison?

J'ai un problème avec flexbox sur IE11 et bien que je sache qu'il y a beaucoup de problèmes connus, je n'ai pas pu trouver de solution ...

<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>BLAH</p>
        </div>
    </article>
</div>

Et le CSS ...

img {
  max-width: 100%;
}

.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-content {
  padding: 20px 35px;
}

Les images sont étirées dans un conteneur flexible.

 enter image description here

Appliquer align-items: flex-start (je pensais que, puisque "stretched" était la valeur par défaut ...) ou justify-content: flex-start ne semblait pas fonctionner.

Codepen: exemple de ce que je veux dire

Qu'est-ce que je fais mal?

htmlcsscss3internet-explorerflexbox
41
Jusi

pour éviter ce comportement amusant, vous pouvez réinitialiser la propriété flex-shrink.

Cela ressemble à un bogue malgré ce que dit Microsoft:

<'flex-shrink'>

Définit le facteur de contraction de la flexion ou la flexibilité négative pour l’élément flex. Le facteur de rétrécissement du flex détermine le degré de rétrécissement d'un élément flex par rapport aux autres éléments du conteneur.

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

Source: https://msdn.Microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspxhttps://msdn.Microsoft.com/en-us// bibliothèque/hh772069% 28v = vs.85% 29.aspx

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


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

93
G-Cyr

J'avais l'image étiré sur l'axe transversal (étirement en hauteur, en utilisant flex-direction: row).

Cette pile Q/A m'a aidé à le résoudre:

Lien ici

Je devais définir les css suivants sur mon img:

align-self: flex-start;

Vous aurez peut-être besoin d'une autre valeur que le cours à début flexible, selon votre objectif. La mienne est d’avoir mon image en haut de la rangée.

5
Rik Schoonbeek

J'ai essayé toutes les solutions ici mais rien n'a fonctionné. La seule chose pour laquelle j'utilisais flexbox était de centrer verticalement l'image affichée lors du survol d'une autre image. Donc, je viens d'utiliser une solution plus classique à la top: 50%; transform: translateY(-50%) et ensuite c'était ok. Donc, essentiellement, ne pas utiliser du tout flexbox alors .. #hateIE

0
OZZIE

J'ai eu un bug similaire dans IE11 . Les styles ont été pris à partir de Bootstrap 4.1, donc pour les images fluides que j'ai eues:

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

Dans mon cas, il est apparu que la raison était dans max-width: 100%. Ainsi, lorsque je l'ai changé en width: 100%, le bogue a disparu:

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

Cette solution ne convient pas à tout le monde, mais j'espère que ce serait utile.

0
Sergey Sklyar

J'ai eu un problème avec les images étirées du produit dans IE11, et j'ai fait des 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;
    }
}

Je me suis alors rendu compte que mon image height: 100% était le coupable de l'image étirée et j'ai simplement supprimé ma hauteur, mais mon image était alors au sommet de mon conteneur .productImage au lieu d'être centrée verticalement. J'ai introduit flex ici et l'ai positionné dans un simple align-items: center, mais cela n'a bien sûr pas fonctionné dans IE11. J'ai aussi essayé le flex-shrink: 0 mais cela n'a pas fonctionné non plus.

Je suis ensuite allé de l'avant en sautant avec flex et j'ai essayé le top: 50%; left: 50%; transform: translate(-50%, -50%); classique, mais ce n'était pas bon non plus, car j'avais déjà utilisé une transformation pour mon effet de zoom sur l'image.

J'ai fini avec cette solution à la place:

.productImage {
    position: relative;
    overflow: hidden;

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

Ça a marché comme sur des roulettes

0
Jonatan Östling