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

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

无需添加包含div的文件。

css“对齐项”属性的默认值是“拉伸”，这是导致图像被拉伸到其全部原始高度的原因。将css"拟订项目"属性设置为"flex-start"可修复问题。

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

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

为了防止图像在flex父对象中的任一轴上拉伸，我找到了两种解决方案。

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

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

或者您可以添加灵活的规则，这在某些情况下可能会更好。

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