移动端背景图水平拉伸变形？检查 background-repeat round 值
当背景图与容器宽高比不一致时，使用 round 值会导致图片被拉伸变形，应改用 space 或 repeat。
检查背景图与容器宽高比是否一致
在移动端开发中，如果背景图片的宽高比与容器的宽高比不一致，使用 round 值会导致图片被拉伸变形。round 值会拉伸图片以填满可用空间，直到有足够空间容纳下一个重复的图片。例如，背景图片为 100px x 100px，容器为 1099px x 750px，图片会在水平方向重复 10 次，垂直方向重复 7 次，每张图片被拉伸为 109.9px x 105px，从而改变图片的宽高比。
要检查背景图与容器宽高比是否一致，可以使用浏览器开发者工具查看元素的背景图尺寸和容器尺寸。如果背景图尺寸与容器尺寸的宽高比不一致，应避免使用 round 值，改用 space 或 repeat 值，以保持图片的原始宽高比。space 值会在图片之间均匀分布空白，而不会拉伸图片。
排查 background-repeat 属性是否使用了 round 值
检查背景图是否使用了 round 值是解决变形问题的关键步骤。round 值是唯一会导致背景图宽高比变形的值。如果背景图宽高比与容器宽高比不一致，使用 round 值会导致图片被拉伸变形。例如，背景图片为 100px x 100px，容器为 1099px x 750px，图片会在水平方向重复 10 次，垂直方向重复 7 次，每张图片被拉伸为 109.9px x 105px，从而改变图片的宽高比。
要排查 background-repeat 属性是否使用了 round 值，可以在 CSS 中检查 background-repeat 属性的值。如果 background-repeat 属性的值为 round，应将其改为 space 或 repeat 值。space 值会在图片之间均匀分布空白，而不会拉伸图片。repeat 值会重复图片，但不会拉伸图片。
使用 space 值替代 round 值以保持图片宽高比
如果背景图宽高比与容器宽高比不一致，应使用 space 值替代 round 值，以保持图片的原始宽高比。space 值会在图片之间均匀分布空白，而不会拉伸图片。例如，背景图片为 100px x 100px，容器为 1099px x 750px，使用 space 值会在图片之间均匀分布空白，而不会拉伸图片。space 值会在图片之间均匀分布空白，而不会拉伸图片。
要使用 space 值替代 round 值，可以在 CSS 中将 background-repeat 属性的值改为 space。space 值会在图片之间均匀分布空白，而不会拉伸图片。如果背景图宽高比与容器宽高比不一致，使用 space 值可以保持图片的原始宽高比，避免图片变形。
验证修复后的显示效果
修复后，应验证背景图的显示效果是否正常。使用 space 值后，背景图会在容器内重复，图片之间均匀分布空白，而不会拉伸图片。例如，背景图片为 100px x 100px，容器为 1099px x 750px，使用 space 值会在图片之间均匀分布空白，而不会拉伸图片。验证时，可以使用浏览器开发者工具查看背景图的尺寸和容器尺寸，确保背景图的宽高比与容器宽高比一致。
如果背景图的显示效果正常，说明修复成功。如果背景图的显示效果仍然不正常，应进一步检查背景图尺寸和容器尺寸，确保背景图尺寸与容器尺寸的宽高比一致。如果背景图尺寸与容器尺寸的宽高比不一致，应使用 space 值替代 round 值，以保持图片的原始宽高比。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。