小开

大多数图像采用 内在尺寸，即自然大小，像 jpeg图像。如果指定的大小同时定义了宽度和高度，则使用内部比率确定缺失值...-参见 MDN。

但是据我所知，如果图像被设置为当前灵活的盒子布局模块1级的直接伸缩项目，那么它就不能像预期的那样工作了。

看看这些讨论和 bug 报告可能有关联:

Flexbug # 14 -Chrome/Flexbox 内部大小调整没有正确实现。
Firefox Bug 972595 -Flex 容器应该使用“ Flex-base”而不是“ width”来计算 Flex 条目的内在宽度
铬问题249112 -在 Flexbox，允许内部长宽比通知主尺寸计算。

作为一种变通方法，您可以用 <div>或 <span>包装每个 <img>，或者类似的方法。

.slider {
display: flex;
}


.slider>div {
min-width: 0; /* why? see below. */
}


.slider>div>img {
max-width: 100%;
height: auto;
}

<div class="slider">
<div><img src="https://picsum.photos/400/300?image=0" /></div>
<div><img src="https://picsum.photos/400/300?image=1" /></div>
<div><img src="https://picsum.photos/400/300?image=2" /></div>
<div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Flex 条目的隐含最小大小

为了为弹性物品提供一个更合理的默认最小大小, 本规范引入了一个新的奥托值作为初始值中定义的最小宽度和最小身高属性的值 CSS 2.1.

或者，你可以使用 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;
}

<div class="slider">
<div><img src="https://picsum.photos/400/300?image=0" /></div>
<div><img src="https://picsum.photos/400/300?image=1" /></div>
<div><img src="https://picsum.photos/400/300?image=2" /></div>
<div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

小开

最近我一直在弹性工具箱周围玩，我通过实验和以下推理来解决这个问题。然而，在现实中，我不确定这是否确实会发生。

如果实际宽度受柔性系统的影响。所以当元素的宽度达到父元素的最大宽度时，它们在 css 中设置的额外宽度将被忽略。然后将宽度设置为100% 是安全的。

由于 img 标记的高度是从图像本身派生出来的，因此将高度设置为0% 可以做一些事情。(这里我不清楚是什么... ... 但对我来说，它应该修复它是有意义的)

DEMO

(记得是在这里看到的!)

.slider {
display: flex;
}
.slider img {
height: 0%;
width: 100%;
margin: 0 5px;
}

只能用铬合金

小开

最佳答案

对于 img 标签来说，如果你定义了一边，那么另一边就会调整大小以保持高宽比，默认情况下图像会扩展到原始大小。

如果您将每个 img 标记包装到 div 标记中，并将其宽度设置为父 div 的100% ，那么高度将根据所需的长宽比来确定。

http://jsfiddle.net/0o5tpbxg/

* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
}
.slider .slide img {
width: 100%;
}

小开

为了防止图像在弹性父元件的任何一个轴上拉伸，我找到了两个解决方案。

你可以尝试使用对象适合的图像，例如。

object-fit: contain;

Http://jsfiddle.net/ykw3sfjd/

或者您可以添加特定于 Flex 的规则，这些规则在某些情况下可能工作得更好。

align-self: center;
flex: 0 0 auto;

小开

实际上，我发现图像标签的容器需要有一个高度，以保持图像的比例。例如 >

.container{display:flex; height:100%;} img{width:100%;height:auto;}

然后在 html 中，容器将包装标记图像

<div class="container"><img src="image.jpg" alt="image" /></div>

这适用于 IE 和其他浏览器

小开

我也有同样的问题。使用弯曲对齐，以中心您的元素。您需要使用 align-items: center而不是 align-content: center。这将保持长宽比，而对齐内容将不会保持长宽比。

小开

这种行为是预料之中的。Flex 容器默认情况下将其所有子级拉伸。形象也不例外。(即，父母将有 align-items: stretch财产)

为了保持高宽比，我们有两个解决方案:

将默认的 align-items: stretch属性替换为 align-items: flex-start或 align-self: center等, http://jsfiddle.net/e394Lqnt/3/

或者

专门为子元素设置对齐属性: 如 align-self: center或 align-self: flex-start等。 http://jsfiddle.net/e394Lqnt/2/

小开

不需要添加包含 div 的。

Css 的默认属性是“拉伸”，这是什么导致你的图像被拉伸到其完整的原始高度。将 css 的“ arging- 项目”属性设置为“ flex-start”可以修复您的问题。

.slider {
display: flex;
align-items: flex-start;  /* ADD THIS! */
}

小开

声明给予元素 display: flex;的位置。
align-items: center;

在改变高度时保持图像长宽比

DEMO