移动端背景图垂直拉伸变形？检查 background-repeat-y 的 round 值
当背景图高度与容器高度不匹配时，使用 round 值会导致图片被拉伸以填充剩余空间，从而改变图片比例。
排查图片被拉伸变形的重复模式
移动端页面背景图出现垂直方向拉伸变形时，首先需要确认背景图的重复模式。如果使用了 background-repeat-y 的 round 值，浏览器会自动调整图片高度以填充容器。例如，背景图高度为 100px，容器高度为 1099px，round 模式会将图片重复 10 次，每张图片拉伸至 109.9px 高。这种拉伸会导致图片比例改变，从而引起变形。需要检查 CSS 中 background-repeat-y 的具体取值，确认是否为 round。
验证留白与拉伸的关系。如果容器高度不是图片高度的整数倍，round 模式会强制拉伸图片以消除留白。例如，容器高度为 1100px，图片高度为 100px，round 模式会将图片重复 11 次，每张图片高度恢复为 100px，不再拉伸。如果发现图片变形，说明当前高度差导致浏览器进行了拉伸。此时需要确认背景图尺寸与容器高度的关系，以及是否需要调整 background-size 属性来匹配容器大小。
检查 round 值对图片比例的影响
使用浏览器开发者工具检查 background-repeat-y 的具体取值。在元素样式中查看该属性的值，确认是否为 round。如果是 round，需计算其对应的像素偏移量。例如，元素高度为 1099px，background-repeat-y 为 round，则偏移量为 109.9px。如果实际变形量与计算结果相符，说明 round 模式导致了拉伸。此时需要调整 background-repeat-y 的值，例如改为 repeat 或 space，以避免图片被拉伸。
通过实际测试调整 background-repeat-y 的值。将 round 改为 repeat，观察图片是否恢复原比例。例如，将 background-repeat-y 从 round 改为 repeat，查看图片是否不再变形。如果 repeat 能解决问题，说明 round 模式不适合当前场景。此时建议使用 repeat 或 space 属性来确保背景图保持原比例。如果容器高度是图片高度的整数倍，round 模式不会拉伸图片；否则会拉伸。
调整背景图尺寸与重复模式
调整 background-size 属性以匹配容器高度。如果背景图高度小于元素高度，可以设置 background-size 为 cover 或 100% height，确保图片完全覆盖容器。同时，结合 background-repeat-y 的 round 值进行微调，避免拉伸。例如，设置 background-size: 100% 100% 和 background-repeat-y: repeat，可以确保背景图从顶部开始填充，且不拉伸图片。如果背景图高度大于元素高度，round 模式会自动裁剪多余部分。
使用 background-repeat-y 的 space 值来避免拉伸。如果背景图高度与容器高度不匹配，space 值会在图片之间添加空白，确保图片不被裁剪。例如，容器高度为 300px，背景图高度为 100px，space 值会将图片重复 3 次，并在每张图片之间添加 0px 的空白。这种方法适用于需要保持图片比例的场景。如果容器高度是图片高度的整数倍，round 模式不会拉伸图片；否则会拉伸。
确认留白是否由背景图裁剪引起
检查背景图是否被裁剪导致底部留白。如果 background-repeat-y 的 round 值导致图片超出容器范围，浏览器会自动裁剪多余部分，从而在底部留下空白。例如，设置 background-repeat-y 为 round，且容器高度小于图片高度，浏览器会裁剪图片底部。需要调整 background-repeat-y 的值，确保图片完全位于容器内。如果容器高度是图片高度的整数倍，round 模式不会裁剪图片；否则会裁剪。
使用 background-repeat-y 的 repeat 值来避免裁剪。如果背景图高度与容器高度不匹配，repeat 值会在图片之间添加空白，确保图片不被裁剪。例如，容器高度为 300px，背景图高度为 100px，repeat 值会将图片重复 3 次，并在每张图片之间添加 0px 的空白。这种方法适用于需要保持图片完整性的场景。如果容器高度是图片高度的整数倍，round 模式不会裁剪图片；否则会裁剪。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。