flex 为什么会造成 图片变形

Flex 布局是一种弹性盒模型，用于在容器中进行灵活的元素排列。当在 Flex 容器中放置图片时，可能会出现图片变形的问题。这主要是由于以下几个原因：

1. 图片的宽高比例不匹配：如果图片的宽高比例与容器的宽高比例不一致，那么在进行 Flex 布局时，图片可能会被拉伸或压缩，从而导致变形。

2. 容器的尺寸限制：如果 Flex 容器的尺寸限制了图片的宽度或高度，那么图片在填充容器时可能会被拉伸或压缩，从而导致变形。

3. 对图片的样式设置不当：如果对图片设置了不合适的样式，比如设置了固定的宽度或高度，或者使用了背景图像等，也可能导致图片变形。

为了避免图片变形的问题，可以尝试以下方法：

1. 使用合适的图片尺寸：确保选择的图片具有与容器相匹配的宽高比例，这样在进行 Flex 布局时才能保持图片的比例。

2. 设置合适的容器尺寸：根据需要，调整 Flex 容器的宽度和高度限制，以确保图片可以得到正确的展示。

3. 使用合适的 CSS 样式：避免对图片设置固定的宽度或高度，而是使用 max-width 或 max-height 来限制图片的尺寸。另外，注意不要对图片应用背景图像的样式。

通过以上方法，可以更好地控制图片在 Flex 布局中的展示，避免变形问题的发生。