移动端网页背景图拉伸变形如何排查？检查 background-size 数值
背景图拉伸变形通常是因为指定的宽高数值与图片原始比例不一致，导致浏览器强制拉伸图像。
检查 background-size 的数值是否与图片原始比例一致
背景图拉伸变形的根本原因在于 CSS 的 background-size 属性指定了与图片原始比例不符的宽高数值。当同时指定两个值时，浏览器会强制将图片拉伸至该尺寸，而忽略图片的固有比例。例如，若图片原始比例为 2:1，但 CSS 设置为 100% 50%，图片会被横向拉伸两倍。检查时需确认 background-size 的两个数值是否成比例，或者是否使用了 auto 让浏览器自动计算高度。
如果 background-size 只指定了一个数值，浏览器会自动计算另一个方向的尺寸以保持图片比例。这种情况下，变形通常不会发生。排查时可以尝试将 background-size 设置为单一数值，例如 background-size: 100%;，观察图片是否恢复正常。如果单一数值也无法解决问题，说明问题可能出在图片本身的尺寸或容器的尺寸设置上。
验证图片的固有尺寸与容器尺寸的关系
图片的固有尺寸是指图片文件本身携带的宽高信息，这些信息决定了图片的原始比例。如果 background-size 的百分比数值是基于容器尺寸计算的，而容器的宽高比与图片不一致，图片就会被拉伸。例如，容器宽度为 100%，高度为 200px，而图片原始宽度为 200px，高度为 100px，此时设置 background-size: 100% 100% 会导致图片高度被拉伸两倍。
验证时，可以在浏览器开发者工具中查看图片的固有尺寸。如果图片是矢量图（如 SVG），可能没有固有尺寸，此时 background-size 的计算会变得复杂。对于矢量图，建议明确指定 background-size 的两个数值，或者使用 contain 关键字来确保图片完整显示而不变形。
使用 contain 或 cover 关键字替代数值
如果数值调整复杂，可以使用 contain 或 cover 关键字来避免拉伸变形。contain 关键字会缩放图片以完整显示在容器内，保持图片比例，但可能会留有空白区域。cover 关键字会缩放图片以完全覆盖容器，保持比例，但可能会裁剪图片。选择哪种关键字取决于设计需求。
在移动端，由于屏幕尺寸多变，使用 contain 或 cover 可以更好地适应不同设备。如果希望背景图始终完整显示且不变形，建议优先使用 contain。如果希望背景图填满容器且不裁剪，可以使用 cover。这两种关键字都能避免因数值设置不当导致的拉伸变形问题。
确认 background-repeat 属性是否影响显示效果
background-repeat 属性决定了背景图是否重复显示。如果 background-size 设置为数值且容器尺寸大于图片尺寸，同时 background-repeat 设置为 repeat，图片会重复平铺，可能导致视觉上的拉伸感。检查时需确认 background-repeat 是否设置为 no-repeat，尤其是在使用单一数值或关键字时。
如果背景图需要平铺，建议使用 background-size: 100% 100% 配合 background-repeat: repeat，这样图片会按比例缩放并平铺，不会变形。如果背景图只需要显示一次，建议使用 background-repeat: no-repeat。通过调整这两个属性，可以进一步优化背景图的显示效果。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。