Html IE11 上的 Flexbox：图像无缘无故拉伸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36822370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox on IE11: image stretched for no reason?
提问by Jusi
I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...
我在 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>
And the CSS...
和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;
}
Images are getting stretched within a flex container.
图像在 flex 容器中被拉伸。
Applying align-items: flex-start(I figured, since "stretched" is the default value...) or justify-content: flex-startdoesn't seem to work.
应用align-items: flex-start（我想，因为“拉伸”是默认值......）或justify-content: flex-start似乎不起作用。
Codepen: example of what I mean
Codepen：我的意思的例子
What am I doing wrong?
我究竟做错了什么？
回答by G-Cyrillus
to avoid this funny behavior, you may reset the flex-shrinkproperty.
为避免这种有趣的行为，您可以重置该flex-shrink属性。
This looks like a bug, despite what Microsoft says:
这看起来像是一个错误，尽管微软是这样说的：
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.aspxhttps://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
设置弹性项目的弹性收缩系数或负弹性。flex 收缩因子决定了一个 flex 项目相对于 flex 容器中的其他项目将收缩多少。
如果省略，元素的负弹性为“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>回答by Rik Schoonbeek
I had image stretch on the cross-axis (stretch in height, using flex-direction: row).
我在横轴上进行了图像拉伸（高度拉伸，使用 flex-direction: row）。
This Stack Overflow Q/A helped me solve it:
这个 Stack Overflow Q/A 帮我解决了这个问题：
I had to set the following CSS on my img:
我必须在我的 img 上设置以下 CSS：
align-self: flex-start;
You might need another value than flex-startof course, depending on your goal. Mine is to have my image be at the top of the row.
您可能需要其他值而不是flex-start当然，这取决于您的目标。我的是让我的形象在行的顶部。
回答by Sergey Sklyar
I had a similar bug in IE11. The styles were taken from Bootstrap 4.1, so for the fluid images I had:
我在 IE11 中有一个类似的错误。这些样式取自 Bootstrap 4.1，因此对于我拥有的流体图像：
.img-fluid {
border: none;
height: auto;
max-width: 100%;
}
In my case it appeared that the reason was in max-width: 100%so when I changed it to width: 100%the bug disappeared:
在我的情况下，似乎是max-width: 100%因为当我将其更改为width: 100%错误时，原因就消失了：
.img-fluid {
border: none;
height: auto;
width: 100%;
}
This solution is not for everyone's case but I hope it would be helpful.
此解决方案不适用于每个人，但我希望它会有所帮助。
回答by Masoud
in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"
在我的例子中，G-Cyr 建议的“flex-shrink: 0”和 Rick Schoonbeek 建议的“align-self: flex-begin”的组合解决了这个问题。我有一个包装器，它使用弹性框将图像与“justify-content: center;”居中。
All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.
在 IE 11、Chrome、Safari 中一切都很好，除了 IE Edge 无法正确显示。在图像上添加两个属性解决了 IE Edge 的问题。
回答by OZZIE
I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%)and then it was ok. So essentially not using flexbox at all then.. #hateIE
我在这里尝试了所有解决方案，但没有任何效果。我使用 flexbox 的唯一目的是将悬停另一张图像时显示的图像垂直居中。所以我只是使用了一个更经典的解决方案top: 50%; transform: translateY(-50%)，然后就可以了。所以基本上根本不使用 flexbox .. #hateIE
回答by Jonatan ?stling
I had an issue with stretched product images in IE11, and I did some research and tried different things.
我在 IE11 中遇到了拉伸产品图像的问题，我做了一些研究并尝试了不同的方法。
This was my code:
这是我的代码：
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
I then realized that my image height: 100%was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImagecontainer instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0but that didn't work either.
然后我意识到我的图像height: 100%是拉伸图像的罪魁祸首，我只是删除了我的高度，但是我的图像位于.productImage容器的顶部而不是垂直居中。我在这里引入了 flex 并通过一个简单的定位它align-items: center，但这在 IE11 中当然不起作用。我也试过，flex-shrink: 0但也没有用。
I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%);but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.
然后我继续跳过使用 flex 并尝试了经典，top: 50%; left: 50%; transform: translate(-50%, -50%);但这也不好，因为我已经使用了一个变换来缩放图像上的悬停效果。
I ended up with this solution instead:
我最终得到了这个解决方案：
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
It worked like a charm
它就像一个魅力
