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

【问题标题】：Flexbox on IE11: image stretched for no reason?IE11 上的 Flexbox：图像无故拉伸？
【发布时间】：2016-08-17 18:28:15
【问题描述】：

我在 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（我想，因为“拉伸”是默认值...）或justify-content: flex-start 似乎不起作用。

Codepen：example of what I mean

我做错了什么？

【问题讨论】：

标签： html css flexbox internet-explorer-11

【解决方案1】：

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

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

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

【讨论】：

效果很好！另一种解决方案是将min-width 设置为与width 相同的值。
弹性收缩：0；解决了我的问题，谢谢！！ :)

【解决方案2】：

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

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

Link here

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

align-self: flex-start;

当然，您可能需要除flex-start 之外的其他值，具体取决于您的目标。我的目的是让我的图像位于行首。

【讨论】：

【解决方案3】：

我在 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%;
}

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

效果很好

【讨论】：

【解决方案6】：

在我的例子中，G-Cyr 建议的“flex-shrink: 0”和 Rick Schoonbeek 建议的“align-self: flex-begin”的组合成功了。我有一个包装器，它使用弹性框将图像与“justify-content: center;”居中

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

【讨论】：