flex导致img默认比例失效？

Question

今天遇到这么一个问题，当父元素设置为flex:1时，子元素img默认的宽高比会失效，这是什么原因？

<div>
    <a href="">
             <img src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super">
          </a>
</div>

div {
    width: 100px;
    height: 100px;
    display: flex;
    background-color: #007bfc;
}

div a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

div a img {
    vertical-align: middle;
    height: 10%;
}

JSFiddle： https://jsfiddle.net/molvqing...

Answer 1

flex布局下的元素宽高为百分比时并不是一个固定的值,所以只定义了height的话,width会使用图像的原始大小来确定
flex布局下的子元素,默认的flex-shrink属性为1,如果空间不足，该项目将缩小,因为图像本身的宽度大于容器,所以缩小为容器的宽
可以试一试将图像的height指定为一个固定值
https://developer.mozilla.org...

Answer 2

设置了flex:1 又设置了height:10% 不就是人为设置宽度和高度了么 当然变形

这样吧
div {

width: 100px;
height: 100px;
position: relative;
background-color: #007bfc;

}

div a img {

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
vertical-align: middle;
height: 10%;

}

Answer 3

flex下height是生效的，所以img是父窗口的10%