IE11上的Flexbox：无缘无故拉伸图像？

我在IE11上的flexbox遇到问题，虽然我知道有很多已知问题，但我找不到解决方法...

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

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

图像在flex容器中被拉伸。

应用align-items: flex-start（我认为，因为“ stretched”是默认值...）或justify-content: flex-start似乎不起作用。

Codepen：我的意思示例

我究竟做错了什么？

为了避免这种有趣的行为，您可以重置flex-shrink属性。

尽管微软说了什么，但这看起来像个错误：

<'伸缩收缩'>

设置柔韧性项目的柔韧性收缩系数或负柔韧性。伸缩收缩因子确定伸缩项目相对于伸缩容器中的其他项目将收缩多少。

如果省略，则该元素的负柔度为“ 0”。负值无效。

来源：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

我在横轴上进行了图像拉伸（高度拉伸，使用flex-direction：row）。

这个Stack Overflow Q / A帮助我解决了这个问题：

连结这里

我必须在img上设置以下CSS：

align-self: flex-start;

flex-start当然，您可能还需要另一个值，具体取决于您的目标。我的形象应该排在最上方。

我在IE11中有一个类似的错误。样式取自Bootstrap 4.1，因此对于流畅的图像，我具有：

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

以我为例，原因似乎是max-width: 100%这样，所以当我将其更改为width: 100%错误时，它消失了：

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

此解决方案并不适合每个人，但我希望它会有所帮助。

在我的案例中，由G-Cyr建议的“ flex-shrink：0”和由Rick Schoonbeek建议的“ align-self：flex-begin”的组合可以解决问题。我有一个包装器，该包装器使用弹性框将图像居中放置为“ justify-content：center;”

在IE 11，Chrome和Safari中，一切都很好，但IE Edge无法正确显示。在图像上添加两个属性解决了IE Edge的问题。

我在这里尝试了所有解决方案，但没有任何效果。我使用flexbox的唯一目的是在悬停另一个图像时将显示的图像垂直居中。因此，我只是使用了一种更经典的解决方案àla top: 50%; transform: translateY(-50%)，然后就可以了。因此，基本上根本不使用flexbox。

我在IE11中使用扩展的产品图片时遇到问题，我做了一些研究并尝试了不同的方法。

这是我的代码：

.productImage {
    position: relative;
    overflow: hidden;

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

然后，我意识到我的图像height: 100%是拉伸图像的罪魁祸首，我只是移开了高度，但随后我的图像位于.productImage容器的顶部，而不是垂直居中。我在这里介绍了flex并通过一个简单的对其进行了定位align-items: center，但这当然在IE11中不起作用。我也尝试过了，flex-shrink: 0但是那也不起作用。

然后，我继续跳过使用flex的尝试，尝试了经典方法，top: 50%; left: 50%; transform: translate(-50%, -50%);但这也不好，因为我已经使用了变换来缩放图像上的悬停效果。

我最终得到了这个解决方案：

.productImage {
    position: relative;
    overflow: hidden;

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

它像魅力一样运作