移动端背景图被拉伸变形？检查 background-size 的 auto 计算逻辑
当移动端背景图出现拉伸变形时，应重点检查 background-size 属性的 auto 值计算逻辑，确认图片是否按其固有比例渲染。
确认图片的固有尺寸与比例
背景图渲染尺寸的计算依赖于图片的固有尺寸和固有比例。位图（如 JPG）总是具有固有尺寸和比例，而矢量图（如 SVG）可能没有。如果图片没有固有尺寸或只有单一维度，且没有固有比例，浏览器会将其渲染为背景定位区域的大小。在移动端调试时，首先应确认当前使用的背景图类型及其原始尺寸，这是判断是否出现非预期拉伸的前提。
CSS 规范指出，当 background-size 为 auto 或 auto auto 时，如果图片具有水平和垂直固有尺寸，则按该尺寸渲染。如果图片没有固有尺寸且没有固有比例，则按背景定位区域的大小渲染。这意味着，如果开发者错误地使用了没有固有尺寸的矢量图作为背景，或者图片本身尺寸异常，浏览器会强制将其拉伸以填满容器，导致视觉上的变形。检查图片源文件属性是排查此类问题的第一步。
检查 auto 值与单一维度图片的处理
当 background-size 只指定了一个值（如 auto）时，另一个维度默认为 auto。此时，如果图片只有单一固有维度（例如只有宽度没有高度），且具有固有比例，浏览器会根据该单一维度和比例计算另一个维度。如果图片没有固有比例，浏览器会使用指定的单一维度和背景定位区域的另一个维度来渲染。这种计算逻辑在处理非标准尺寸图片时容易引发布局错位。
在移动端开发中，常见的问题是使用了只有宽度没有高度的图片，或者使用了没有固有比例的渐变作为背景。如果此时设置了 background-size: auto，浏览器无法正确计算高度，导致图片被拉伸。验证方法是查看浏览器开发者工具中的计算样式，确认 background-size 的具体计算值是否与预期一致，或者直接在 CSS 中显式指定宽高比，避免依赖 auto 的自动计算。
验证 contain 与 cover 的裁剪行为
使用 contain 或 cover 关键字时，浏览器会保持图片的固有比例。contain 会缩放图片使其尽可能大且完全包含在容器内，cover 则缩放图片使其完全覆盖容器。如果图片的固有比例与容器不同，contain 会在容器内留有空白，cover 则会裁剪掉部分图片。在移动端，这种裁剪行为可能导致关键信息被隐藏。
验证方法是对比容器尺寸与图片原始尺寸的比例。如果容器宽高比与图片不同，使用 cover 时图片会被裁剪。可以通过调整容器的宽高比或更换背景图来测试。如果希望避免裁剪，应使用 contain 并配合 no-repeat，或者显式设置 background-size 的具体像素值，确保图片按预期比例显示。
排查多背景图片的尺寸设置
当页面使用多背景图片时，每个背景图片的尺寸由 background-size 属性的对应值决定。如果只指定了一个值，则所有背景图片使用该值。如果指定了多个值，则按顺序应用。多背景图片的尺寸计算同样遵循固有尺寸和比例的逻辑。如果某个背景图片的尺寸设置不当，可能会导致整体布局错乱。
验证方法是检查 CSS 中的 background-size 属性，确认是否为每个背景图片正确设置了尺寸。如果使用了 auto，应确保所有背景图片都具有固有尺寸和比例。如果使用了百分比，应确认百分比是相对于背景定位区域的。通过移除多余的背景图片或显式设置尺寸，可以快速定位导致变形的具体背景图。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。