flex布局下图片被拉伸的解决办法

今天在写代码的过程中遇到了在 flex 布局中,图片会被自动拉伸的问题。这与 flex-shrink 这个属性的默认值有关,具体属性描述可以参考 MDN 文档,下面是两条常用的解决办法。

1.因为 flex-shrink 的默认值为 1,才会导致图片拉伸,在 img 标签将其默认值改为 0 即可。

img {

    flex-shrink:0;

}

2.为被拉伸的 img 标签添加 div 父标签将其包裹起来,不过这个方法会产生无用的标签。

你可能感兴趣的:(flex布局下图片被拉伸的解决办法)