web-dev-qa-db-ger.com

Flexbox auf IE11: Bild ohne Grund gedehnt?

Ich habe ein Problem mit Flexbox auf IE11, und obwohl mir bewusst ist, dass es viele bekannte Probleme gibt, 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 gestreckt.

 enter image description here

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

Codepen: Beispiel für was ich meine

Was mache ich falsch?

41
Jusi

um dieses komische Verhalten zu vermeiden, können Sie die flex-shrink-Eigenschaft zurücksetzen.

Das sieht nach einem Fehler aus, was Microsoft sagt:

<'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 Artikeln im Flex-Container schrumpft.

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

Quelle: https://msdn.Microsoft.com/de-de/library/jj127297%28v=vs.85%29.aspxhttps://msdn.Microsoft.com/en-us// Bibliothek/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

Ich hatte eine Bildstreckung auf der Querachse (Streckenhöhe in Flexrichtung: Reihe).

Dieses Q/A-Stackoverflow-Problem hat mir geholfen, es zu lösen:

Link hier

Ich musste folgende CSS in meinem img einstellen:

align-self: flex-start;

Möglicherweise benötigen Sie einen anderen Wert als den Flex-Start-Kurs, abhängig von Ihrem Ziel. Meiner Meinung nach soll mein Bild ganz oben in der Reihe stehen.

5
Rik Schoonbeek

Ich habe hier jede Lösung ausprobiert, aber nichts hat funktioniert. Das einzige, was ich für Flexbox verwendete, war, ein Bild vertikal zu zentrieren, wenn ein anderes Bild angezeigt wird. Also habe ich einfach eine klassischere Lösung à la top: 50%; transform: translateY(-50%) verwendet und dann war es in Ordnung. Also im Wesentlichen keine Flexbox dann verwenden .. #hateIE

0
OZZIE

Ich hatte einen ähnlichen Fehler in IE11 .. Die Stile wurden von Bootstrap 4.1 übernommen, also für die flüssigen Bilder, die ich hatte:

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

In meinem Fall schien es, dass der Grund in max-width: 100% lag. Als ich ihn in width: 100% änderte, verschwand der Fehler:

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

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

0
Sergey Sklyar

Ich hatte ein Problem mit gestreckten Produktbildern in IE11, habe etwas recherchiert 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;
    }
}

Ich erkannte dann, dass mein Bild height: 100% der Täter des gestreckten Bildes war, und entfernte einfach meine Höhe, aber dann befand sich mein Bild oben in meinem .productImage-Container, anstatt vertikal zentriert zu sein. Ich habe flex hier eingeführt und durch einen einfachen align-items: center positioniert, aber das funktionierte in IE11 natürlich nicht. Ich habe auch flex-shrink: 0 ausprobiert, aber das hat auch nicht funktioniert.

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

Ich bekam stattdessen diese Lösung:

.productImage {
    position: relative;
    overflow: hidden;

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

Es hat wie ein Zauber funktioniert

0

in meinem Fall hat die Kombination aus "flex-shrink: 0" von G-Cyr und "align-self: flex-begin" von Rick Schoonbeek den Trick gemacht. Ich hatte einen Wrapper, der eine Flexbox verwendete, um das Bild mit einem "Justify-Content: Center" zu zentrieren.

In IE 11, Chrome und Safari war alles in Ordnung, mit Ausnahme von IE Edge konnte nicht korrekt angezeigt werden. Durch Hinzufügen der beiden Attribute zu Image wurde das Problem mit IE Edge behoben.

0
Masoud