更改高度时保持图像宽高比

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;

}