Flexbox auf IE11: Bild ohne Grund gestreckt?

70

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.

Geben Sie hier die Bildbeschreibung ein

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?

html css flexbox internet-explorer-11 Jusi
quelle

Antworten:

170

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

Code-Snippet anzeigen

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

G-Cyrillus
quelle
5
Funktioniert super! Eine andere Lösung besteht darin min-width, den gleichen Wert wie einzustellen width.
Joe DF
Flex-Shrink: 0; mein Problem gelöst, danke !! :)
Luis Lasser
16

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.

Rik Schoonbeek
quelle
3

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.

Sergey Sklyar
quelle
2

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.

Masoud
quelle
0

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

OZZIE
quelle
0

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

Jonatan Östling
quelle