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

Question

我在 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 似乎不起作用。

代码笔：example of what I mean

我做错了什么？

Answer 1

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

这看起来像是一个错误，尽管 Microsoft 是这样说的：

<'flex-shrink'>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

If omitted, the element's negative flexibility is "0". A negative value is not valid.

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

Answer 2

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

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

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

align-self: flex-start;

当然，您可能需要 flex-start 以外的其他值，具体取决于您的目标。我的是让我的图片在行的顶部。

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

此解决方案并不适合所有人，但希望对您有所帮助。

Answer 4

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

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

效果很好

Answer 6

在我的案例中，G-Cyr 建议的 "flex-shrink: 0" 和 Rick Schoonbeek 建议的 "align-self: flex-begin" 的组合达到了目的。我有一个包装器，它使用 flex box 将图像居中 "justify-content: center;"

IE 11 一切正常，Chrome，Safari 除了 IE Edge 无法正确显示。在图像上添加两个属性解决了 IE Edge 的问题。

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

Flexbox on IE11: image stretched for no reason?

html

css

flexbox

internet-explorer-11