safari中flex布局时img宽高等比缩放自适应问题

本篇文章讲解一下safari浏览器中flex布局时img宽高等比缩放自适应问题。

今天用flex布局时，在flex布局中添加了img标签，为了方便我只设置了宽度，按理说高度会根据宽高比等比缩放自适应的。

但是在safari中高度没有变化导致图片变形了。

/*html*/
<div class="flexBox">
    <img src="image.jpg" alt="img"/>
</div>




/*css代码*/
.flexBox{
    display:flex;
}
 
.flexBox img{
    width:30%;
}

解决方案： 修改flexBox样式

.flexBox{
    display:flex;
    align-items:center;
}