IE 11：图像不能在flexbox内正确缩小

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

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/

这是我在IE 11已经有了：

来源

2017-02-11 yifei3212

我无法解释这一点，但你总是可以设定的100％的高度上图像并手动定义flexbox的高度，如果这有助于:) –

出于某种原因，通过在'div.inner'（或者只是'flex-shrink：0'）上设置'flex：0 0 auto'也可以解决这个问题。这很奇怪，因为为了让div缩小，你声明它不应该缩小。 – GSerg

IE11似乎有一些麻烦的初始值flex-shrink property。如果你把它设置为零（它最初设置为1），它应该工作：

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>

来源

2017-02-11 09:20:04 andreas

你听起来像设置'flex-shrink：0;'是确保正确初始值的正确方法。但是这里逻辑上正确的值是* [1]，正如我提到的（http://stackoverflow.com/questions/42173213/ie-11-image-doesnt-scale-down-correctly-within-flexbox#comment71511073_42173213），即使'0'恰巧修复它。 – GSerg

我没有说这是正确的方法，我的回答是解决问题的可能方法。在回答...时，我没有看到你的评论 – andreas

IE 11：图像不能在flexbox内正确缩小

回答

相关问题