在 flex 布局下图片被拉伸:
正常的效果:
解决方案:
给出现变形的元素设置 flex-shrink: 0
flex-shrink: 0;
这种方式不会破坏现有的目录结构，只需要给被拉伸的 img 添加一个 css 属性。
flex-shrink 的意思是将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。
在flex布局中，子元素我们没有定义 flex-shrink 属性时默认值为 1，浏览器将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩，因此在图片加载过程中可能会出现被拉伸的情况，我们直接设置为 0 表示不收缩。
属性描述及兼容性可以参考 MDN 的文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink
