问题图示

变形的图片

变形的图片
正常的图片
正常的图片

解决方案

方案1：用 div 标签包裹 img 标签
用div标签包裹图片，这种方案比较通用。
缺点：产生无用标签。

方案2：flex-shrink: 0
给 img 设置 flex-shrink: 0;
flex-shrink 的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
缺点：仅兼容IE11。如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

方案3：img 设置 height: 100%
在父元素没有设置高度的情况下，给图片设置 height: 100%;

看完文章还有福利拿，往下看👇👇👇
小伙伴可以在公号【grain先森】后台回复【190301】获取130套简历模板。后期小编会建微信群和大家交流分享，期待你们哦！