如何保持柔性箱內圖像的縱橫比：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

這是正常現象。彈性容器將默認爲彈性所有子級。圖像也不例外。 （即父母將有align-items: stretch屬性）

爲了保持縱橫比我們已經兩個解決方案：

1. 要麼替換默認align-items: stretch財產align-items: flex-start或align-self: center等， http://jsfiddle.net/e394Lqnt/3/

或

1. 僅將對齊屬性設置爲兒童本身：喜歡，align-self: center或align-self: flex-start等 http://jsfiddle.net/e394Lqnt/2/