我正在尝试使用flexbox将两个图像放在一列中。在这种情况下,div容器的宽度小于图像的宽度。在Chrome中,图像完美地适合div容器,但在IE中却不行,我不知道为什么。
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中得到的:
div.inner
上设置flex: 0 0 auto
(或仅仅是flex-shrink: 0
)来固定。这很奇怪,因为为了让该 div 缩小,你声明它不应缩小。 - GSerg