html - 改变高度时保持图像纵横比

Question

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

JS fiddle :http://jsfiddle.net/xLc2Le0k/2/

请注意，图像会拉伸(stretch)或收缩以填充容器的宽度。这很好，但我们是否也可以让它拉伸(stretch)或缩小高度以保持图像比例？

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 parent 中的任一轴上拉伸(stretch)，我找到了几个解决方案。

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

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

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

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