IE 11：图像不能在flexbox中正确缩小 [英] IE 11: Image doesn't scale down correctly within flexbox

问题描述

我试图使用flexbox将两个图像放在一列中。在这种情况下，div容器的宽度小于图像的宽度。 div容器非常适合Chrome中的图像，但它不在IE中，我不知道为什么。

  div.outer {width：400px;显示：flex; flex-direction：column; justify-content：space-around;} div.inner {width：100％; border：1px solid red;} img {width：100％; height：auto;}  

 < div class =outer > < div class =inner> < img src =http://placehold.it/480x360> < / DIV> < div class =inner> < img src =http://placehold.it/480x360> < / div>< / div>  

$ b

。如果你将它设置为0（它最初设置为1），它应该工作：

  div.outer {width：400px;显示：flex; flex-direction：column; justify-content：space-around;} div.inner {flex-shrink：0;宽度：100％; border：1px solid red;} img {width：100％; height：auto;}  

 < div class =outer > < div class =inner> < img src =http://placehold.it/480x360> < / DIV> < div class =inner> < img src =http://placehold.it/480x360> < / div>< / div>  

I'm trying to use flexbox to place two image in a column. In this case, the width of the div container is smaller than the width of the image. The div container perfect fits the image in Chrome, but it doesn't in IE, and I don't know why.

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.inner {
  width: 100%;
  border: 1px solid red;
}

img {
  width: 100%;
  height: auto;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

https://jsfiddle.net/Yifei/16cpckqk/

This is what I've got in IE 11:

解决方案

IE11 seems to have some trouble with the initial value of the flex-shrink property. If you set it to zero (it is initially set to 1), it should work:

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
div.inner {
  flex-shrink: 0;
  width: 100%;
  border: 1px solid red;
}
img {
  width: 100%;
  height: auto;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

这篇关于IE 11：图像不能在flexbox中正确缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！