Flexbox auf IE11: Bild ohne Grund gestreckt?

Ich habe ein Problem mit Flexbox in IE11 und obwohl mir bekannt ist, dass viele Probleme bekannt sind, konnte ich keine Lösung finden ...

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

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

Bilder werden in einem Flex-Container gedehnt.

Anwenden align-items: flex-start(ich dachte, da "gestreckt" der Standardwert ist ...) oder justify-content: flex-startscheint nicht zu funktionieren.

Codepen: Beispiel für das, was ich meine

Was mache ich falsch?

Um dieses lustige Verhalten zu vermeiden, können Sie die flex-shrinkEigenschaft zurücksetzen .

Dies sieht wie ein Fehler aus, trotz der Aussagen von Microsoft:

<'Flex-Shrink'>

Legt den Flex-Schrumpfungsfaktor oder die negative Flexibilität für das Flex-Element fest. Der Flex-Schrumpfungsfaktor bestimmt, um wie viel ein Flex-Element im Vergleich zu den anderen Elementen im Flex-Container schrumpft.

Wenn nicht angegeben, ist die negative Flexibilität des Elements "0". Ein negativer Wert ist ungültig.

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

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

Ich hatte eine Bilddehnung auf der Querachse (Dehnung in der Höhe mit Flex-Richtung: Reihe).

Diese Frage / Antwort zum Stapelüberlauf hat mir bei der Lösung geholfen:

Link hier

Ich musste das folgende CSS auf meinem Bild einstellen:

align-self: flex-start;

flex-startAbhängig von Ihrem Ziel benötigen Sie möglicherweise einen anderen Wert als natürlich. Meins ist, dass mein Bild ganz oben in der Reihe steht.

Ich hatte einen ähnlichen Fehler in IE11. Die Stile wurden aus Bootstrap 4.1 übernommen, also für die fließenden Bilder, die ich hatte:

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

In meinem Fall schien der Grund darin zu liegen max-width: 100%, als ich ihn in width: 100%den Fehler änderte, verschwand er:

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

Diese Lösung ist nicht jedermanns Sache, aber ich hoffe, sie wäre hilfreich.

In meinem Fall hat die von G-Cyr vorgeschlagene Kombination aus "Flex-Shrink: 0" und "Align-Self: Flex-Start" von Rick Schoonbeek den Trick gemacht. Ich hatte einen Wrapper, der eine Flexbox verwendete, um das Bild mit einem "Rechtfertigungsinhalt: Mitte" zu zentrieren.

In IE 11, Chrome und Safari war alles in Ordnung, außer dass IE Edge nicht korrekt angezeigt werden konnte. Durch Hinzufügen der beiden Attribute zum Bild wurde das Problem mit IE Edge behoben.

Ich habe hier jede Lösung ausprobiert, aber nichts hat funktioniert. Das einzige, wofür ich Flexbox verwendet habe, war, ein Bild, das beim Bewegen eines anderen Bildes angezeigt wird, vertikal zu zentrieren. Also habe ich einfach eine klassischere Lösung à la verwendet top: 50%; transform: translateY(-50%)und dann war es in Ordnung. Also im Grunde genommen überhaupt keine Flexbox verwenden .. #hateIE

Ich hatte ein Problem mit gestreckten Produktbildern in IE11, habe einige Nachforschungen angestellt und verschiedene Dinge ausprobiert.

Das war mein Code:

.productImage {
    position: relative;
    overflow: hidden;

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

Dann wurde mir klar, dass mein Bild height: 100%der Schuldige des gestreckten Bildes war, und ich entfernte einfach meine Größe, aber dann befand sich mein Bild oben auf meinem .productImageContainer, anstatt vertikal zentriert zu sein. Ich habe hier Flex eingeführt und es durch ein einfaches positioniert align-items: center, aber das hat in IE11 natürlich nicht funktioniert. Ich habe es auch versucht, flex-shrink: 0aber das hat auch nicht funktioniert.

Ich habe dann mit Flex übersprungen und den Klassiker ausprobiert, top: 50%; left: 50%; transform: translate(-50%, -50%);aber das war auch nicht gut, da ich bereits eine Transformation für meinen Zoom-on-Hover-Effekt auf das Bild verwendet hatte.

Ich habe stattdessen diese Lösung gefunden:

.productImage {
    position: relative;
    overflow: hidden;

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

Es funktionierte wie ein Zauber