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

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

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

img {

    flex-shrink:0;

}

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