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

- 日理万妓 2023-06-05 05:54 99阅读 0赞

正常效果

format_png

变形效果

format_png 1

一、flex-shrink: 0

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

二、height: 100%

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

三、外层div标签包裹

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

发表评论

表情:
评论列表 (有 0 条评论,99人围观)

还没有评论,来说两句吧...

相关阅读

    相关 flex布局

    ![在这里插入图片描述][25c3ee75575a44d5ac9a8e830f67b996.png]![在这里插入图片描述][watermark_type_ZHJvaWRzYW

    相关 flex布局

    转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS

    相关 Flex布局

    之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成

    相关 Flex布局

    在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者! 上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、

    相关 flex布局

    Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻...