css flex 图片不拉伸_CSS3 Flexbox保持图像宽高比

大多数具有内在尺寸的图像，即自然尺寸，如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;

}