使用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;
}
为了防止图像在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“对齐项”属性的默认值是“拉伸”，这是导致图像被拉伸到其全部原始高度的原因。将css"拟订项目"属性设置为"flex-start"可修复问题。
.slider {
display: flex;
align-items: flex-start; /* ADD THIS! */
}
