在flex布局下图片被拉伸:
正常的效果:
一、给img元素设置flex-shrink: 0
给 img 设置
flex-shrink: 0;
这种方式不会破坏现有的目录结构，只需要给被拉伸的img添加一个css属性。
flex-shrink 的意思是将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。
我们没有定义flex-shrink属性时默认值为1，浏览器将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩，因此在图片加载过程中可能会出现被拉伸的情况，我们直接设置为0表示不收缩。
二、给img外层添加div标签包裹
第一种方法是设置css属性，这种方法是修改html标签，我们需要用div标签包裹过被拉伸的图片元素，这种方案比较通用，缺点：产生无用标签。
其他元素
其他元素
网上还有说添加 height: 100% 的，在父元素没有设置高度的情况下，给图片设置 height: 100%; 但在我测试过程中发现该方法无效。如果你有更好的解决方式，欢迎评论参与讨论