微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

flex布局下img图片变形的解决方法

  图片正常效果   图片变形效果

一、flex-shrink: 0

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

二、height: 100%

在父元素没有设置高度的情况下,给图片设置 height: 100%;

三、外层div标签包裹

用div标签包裹图片,这种方案比较通用,缺点:产生无用标签



作者:立正小歪牙
链接https://www.jianshu.com/p/d71f6e9d3236
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐