大多数具有内在尺寸的图像,即自然尺寸,如jpeg图像 . 如果指定的大小定义宽度和高度中的一个,则使用内在比率确定缺失值... - 请参阅MDN .
查看这些讨论和错误报告可能是相关的:
Flexbugs #14 - Chrome / Flexbox内在大小调整未正确实施 .
Firefox Bug 972595 - Flex容器应使用"flex-basis"而不是"width"来计算弹性项目的固有宽度
Chromium Issue 249112 - 在Flexbox中,允许内在宽高比通知主尺寸计算 .
作为一种解决方法,您可以使用
jsFiddle
.slider {
display: flex;
}
.slider>div {
min-width: 0; /* why? see below. */
}
.slider>div>img {
max-width: 100%;
height: auto;
}
4.5 Flex项目的隐含最小大小为了为flex项目提供更合理的默认最小大小,此规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值 .
或者,您可以使用CSS table 布局,它将获得与 flexbox 类似的结果,它将适用于更多浏览器,即使对于IE8也是如此 .
jsFiddle
.slider {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.slider>div {
display: table-cell;
vertical-align: top;
}
.slider>div>img {
max-width: 100%;
height: auto;
}