使用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;
}

对于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/

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

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

无需添加包含div。

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

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

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

但是，据我所知，如果使用当前“ 灵活框布局模块级别1”将图像设置为直接柔版项目，则无法正常工作。

请参阅以下讨论和错误报告可能相关：

• Flexbugs＃14 -Chrome / Flexbox固有大小调整未正确实施。
• Firefox错误972595 -Flex容器应使用“ flex-basis”而不是“ width”来计算flex项目的固有宽度
• Chromium Issue 249112-在Flexbox中，允许固有纵横比通知主要尺寸计算。

解决方法是，您可以<img>使用<div>或包裹每个包裹<span>。

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弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸，该规范引入了一个新的自动值作为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;
}

<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>

我最近一直在flexbox周围玩耍，我通过实验和以下推理得出了解决方案。但是，实际上我不确定这是否会发生。

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

由于img标签的高度来自图像本身，因此将高度设置为0％可能会有所作为。（这是我不清楚的地方...但是对我来说应该修复它）

演示

（记住首先在这里看到它！）

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

仅适用于Chrome

此行为是预期的。默认情况下，flex容器将拉伸其所有子级。图片也不例外。（即，父母将拥有align-items: stretch财产）

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

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

要么

2. 设置align属性专门为孩子本身：喜欢，align-self: center或者align-self: flex-start等 http://jsfiddle.net/e394Lqnt/2/

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

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

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

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

这项功能适用于IE和其他浏览器

我只是有同样的问题。使用flex align将元素居中。您需要使用align-items: center而不是align-content: center。这将保持纵横比，而对齐内容将不会保持纵横比。