フレックスボックス内の画像のアスペクト比をフレックスで保持する方法：1

Question

flex:1を持つフレックスボックス内の画像の縦横比を保持する方法は？このフィドルのように

：http://jsfiddle.net/e394Lqnt/1/

HTML：

<div class="slider"> 
    <img src="http://www.placebacon.net/400/300" alt="Bacn"> 
</div> 

CSS：

.slider { 
    display: flex; 
    flex: 1; 
} 
.slider img { 
    width: 100%; 
    align-self: flex-start; 
} 

画像は、親のサイズ変更時に縦横比だ保っされていません。この問題を解決するには？

Answer 1

この動作が期待されています。フレックスコンテナstretchデフォルトではすべての子です。画像に例外はありません。 （すなわち、親はalign-items: stretch性質を持つことになります）

縦横比を保つために、我々は2つのソリューションました：

1. をどちらか、align-items: flex-startまたはalign-self: centerなどに http://jsfiddle.net/e394Lqnt/3/

をデフォルトalign-items: stretchプロパティを交換しますか、

2. alignプロパティを子に排他的に設定する自身：のような、align-self: centerまたはalign-self: flex-startなど http://jsfiddle.net/e394Lqnt/2/