如何保持柔性箱内图像的纵横比：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/