CSS3 Flexbox保持图像宽高比
使用CSS弹性盒模型，如何强制图像保持其纵横比？
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/xLc2Le0k/15/
* { margin: 0; padding: 0; } .slider { display: flex; } .slider .slide img { width: 100%; }
大多数图像具有固有的尺寸 ，这是一个自然的大小，像一个
jpeg图像。 如果指定的大小定义了宽度和高度中的一个，则使用固有比率…确定缺失值 – 参见MDN 。
但是，就我所知，如果被设置为当前灵活框布局模块级别1的直接弹性项目的图像，那么这并不如预期的那样工作。
看到这些讨论和错误报告可能是相关的：
- Flexbugs＃14 – Chrome / Flexbox固有尺寸未正确实施。
- Firefox Bug 972595 – Flex容器应该使用“flex-basis”而不是“width”来计算flex项目的内在宽度
- Chromium问题249112 – 在Flexbox中，允许固有纵横比通知主尺寸计算。
作为一个解决方法，你可以用<div>或者<span>来包装每个<img> 。
的jsfiddle
.slider { display: flex; } .slider > div { min-width: 0; /*don't forget this line, see the explanation below*/ } .slider > div > img { max-width: 100%; /*or width: 100%; if so the above line won't be required */ height: auto; }
<div class="slider"> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> <div><img src="http://www.placebacon.net/400/300"/></div> </div>
为了保持图像不会伸展在Flex父级的任何一个轴上，我已经find了一些解决scheme。
你可以尝试在图像上使用物体贴合，例如
object-fit: contain;
或者你可以添加灵活规则，在某些情况下可能会更好。
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! */ }
最近我一直在玩flexbox，我通过实验和以下的推理来解决这个问题。 但是，实际上我不确定这是否会发生。
如果实际宽度受到柔性系统的影响。 所以在元素的宽度达到父宽度的最大宽度之后，他们在CSS中设置的额外宽度被忽略。 然后将宽度设置为100％是安全的。
由于img标签的高度是从图像本身派生的，所以将高度设置为0％可以做些事情。 （这是我不清楚什么…但它是有道理的，它应该修复它）
DEMO
（记得先在这里看到！）
.slider { display: flex; } .slider img { height: 0%; width: 100%; margin: 0 5px; }
只在铬中工作
其实我发现图像标签的容器需要有一个高度，以保持图像的比例。 例如>
.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 。 这将保持宽高比，而align-content不会保持宽高比。
