更改高度时保持图像纵横比

为了防止图像在 flex 父级中的任一轴上拉伸，我找到了几个解决方案。

您可以尝试在图像上使用对象拟合，例如

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

或者您可以添加在某些情况下可能会更好的弹性特定规则。

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

---

对于 img 标签，如果您定义一侧，则会调整另一侧的大小以保持纵横比，并且默认情况下图像会扩展为其原始大小。

使用这个事实，如果你将每个 img 标签包装到 div 标签中并将其宽度设置为父 div 的 100%，那么高度将根据你想要的纵横比。

http://jsfiddle.net/0o5tpbxg/

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

---

无需添加包含 div。

css“align-items”属性的默认值是“stretch”，这就是导致图像被拉伸到其完整原始高度的原因。将css“align-items”属性设置为“flex-start”可以解决您的问题。

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

---

大多数具有固有尺寸的图像，即自然尺寸，如 jpeg 图像。如果指定的大小定义了宽度和高度之一，则使用内在比率确定缺失值... - 请参阅 MDN。

但据我所知，如果使用当前 Flexible Box Layout Module Level 1 将图像设置为直接弹性项目，则这不会按预期工作。

请参阅这些讨论和可能相关的错误报告：

Flexbugs #14 - Chrome/Flexbox Intrinsic Sizing 未正确实现。

Firefox 错误 972595 - Flex 容器应该使用“flex-basis”而不是“width”来计算 flex 项的固有宽度

Chromium 问题 249112 - 在 Flexbox 中，允许固有纵横比通知主尺寸计算。

作为一种解决方法，您可以使用 <div> 或 <span> 等来包装每个 <img>。

jsFiddle

.slider { 显示：弹性； } .slider>div { 最小宽度：0; /* 为什么？见下文。 */ } .slider>div>img { 最大宽度：100%;高度：自动； }