[解決済み] 高さを変えても画像のアスペクト比を維持する

質問

CSS のフレックスボックスモデルを使用して、画像の縦横比を強制的に維持するにはどうしたらよいでしょうか。

JS Fiddleです。 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/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}