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

Question

使用 CSS flex box 模型，我如何强制图像保持其纵横比？

JS 小提琴：http://jsfiddle.net/xLc2Le0k/2/

请注意，图像会拉伸或收缩以填充容器的宽度。没关系，但我们也可以让它拉伸或缩小 高度 以保持图像比例吗？

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Answer 1

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

您可以尝试在图像上使用 object-fit，例如

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

或者您可以添加在某些情况下可能效果更好的 flex-specfic 规则。

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

Answer 2

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

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

http://jsfiddle.net/0o5tpbxg/

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

Answer 3

无需添加包含 div。

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

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

Answer 4

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

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

查看这些讨论和可能相关的错误报告：

• Flexbugs #14 - Chrome/Flexbox Intrinsic Sizing 未正确实现。
• Firefox Bug 972595 - Flex 容器应该使用“flex-basis”而不是“width”来计算弹性项目的内在宽度
• Chromium Issue 249112 - 在 Flexbox 中，允许固有纵横比通知主尺寸计算。

---

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

jsFiddle

.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 Implied Minimum Size of Flex Items

为flex items 提供更合理的默认最小大小， 本规范引入了一个新的auto 值作为初始值 中定义的 min-width 和 min-height 属性的值 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>

Answer 5

我最近一直在玩 flexbox，我通过实验和以下推理来解决这个问题。但是，实际上我不确定这是否正是发生的情况。

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

由于 img 标签的高度来自图像本身，因此将高度设置为 0% 可以做一些事情。 （这是我不清楚是什么的地方......但对我来说应该修复它是有道理的）

DEMO

（记得先在这里看过！）

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

目前仅适用于 chrome

Answer 6

这种行为是意料之中的。默认情况下，flex 容器会拉伸它的所有子容器。图片也不例外。 （即，父母将拥有align-items: stretch 属性）

为了保持纵横比，我们有两种解决方案：

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

或

1. 将 align 属性专门设置为子项本身：例如，align-self: center 或 align-self: flex-start 等。 http://jsfiddle.net/e394Lqnt/2/

Answer 7

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

Answer 8

其实我发现图片标签的容器需要有一个高度才能保持图片的比例。 例如>

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

然后在您的 html 中，您的容器将包装标签图像

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

这项工作适用于 IE 和其他浏览器

Answer 9

我也遇到了同样的问题。使用 flex align 使元素居中。您需要使用align-items: center 而不是align-content: center。这将保持纵横比，而 align-content 不会保持纵横比。