如何在flexbox中保持图像的宽高比：1

Question

如何在具有flex:1？

的flexbox内保持图像的宽高比

就像这个小提琴一样：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/