本篇文章讲解一下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; }