移动端网页图片加载后比例变形如何排查？检查 aspect-ratio 属性
移动端网页图片加载完成后比例变形通常是因为未设置 aspect-ratio 属性或设置不当。
检查 aspect-ratio 属性是否正确设置
aspect-ratio 属性用于定义元素盒子的期望宽高比。当图片元素设置了 width: auto 和 height: 100% 时，浏览器需要知道期望的宽高比来计算高度。如果未指定 aspect-ratio，浏览器会根据图片加载后的实际像素尺寸来渲染，这可能导致在移动端屏幕上出现拉伸或压缩变形。确保在 CSS 中为图片元素添加 aspect-ratio 属性，例如 aspect-ratio: 16/9，可以强制浏览器在图片加载前保持预期的比例。
aspect-ratio 属性的语法支持 auto 和 <ratio> 值。当同时指定 auto 和 <ratio> 时，如果元素是替换元素（如 img），则使用指定的比例直到内容加载完成，加载完成后则应用 auto 值。这意味着对于图片，设置 aspect-ratio: 3/2 auto 可以在图片未加载时保持 3/2 的比例，加载完成后则使用图片自身的自然宽高比。这种设置方式可以防止加载过程中的布局抖动，确保页面在图片加载前和加载后都保持良好的视觉效果。
验证 aspect-ratio 对替换元素的影响
aspect-ratio 属性对替换元素（如 img）的行为有特定定义。根据 MDN 资料，当 aspect-ratio 属性同时包含 auto 和 <ratio> 时，如果元素是替换元素，则指定的比例在内容加载前生效，加载完成后自动切换为 auto。这意味着如果只设置了 aspect-ratio: 3/2 而没有 auto 值，图片加载后可能会强制保持 3/2 的比例，即使图片本身的宽高比不同，从而导致变形。因此，对于图片元素，建议使用 aspect-ratio: 3/2 auto 的组合。
验证 aspect-ratio 对替换元素的影响可以通过检查图片加载前后的状态来实现。在开发者工具的 Elements 面板中，可以查看图片元素的计算样式。如果设置了 aspect-ratio: 3/2 auto，在图片未加载时，计算样式中的 aspect-ratio 应显示为 3/2；图片加载完成后，aspect-ratio 应变为 auto。如果图片加载后 aspect-ratio 仍然显示为 3/2，说明 auto 值未生效，可能是浏览器兼容性问题或 CSS 语法错误。
排查 aspect-ratio 未生效的原因
aspect-ratio 属性未生效可能由多种原因导致。首先，检查 CSS 选择器是否正确应用到了目标元素上。其次，确保 aspect-ratio 的语法正确，例如 aspect-ratio: 16/9 是有效的，而 aspect-ratio: 16:9 在某些旧版浏览器中可能不被支持。此外，aspect-ratio 属性需要至少有一个尺寸是自动的才能生效。如果同时设置了 width 和 height 为固定值，aspect-ratio 将不会影响盒子的尺寸计算。
浏览器兼容性也是 aspect-ratio 未生效的原因之一。MDN 提到该属性自 2021 年 9 月起在多个浏览器中广泛可用，但在某些旧版移动浏览器中可能不支持。如果目标用户群体使用的是较旧的移动设备或浏览器，可能需要使用 JavaScript 或 CSS 回退方案来保持比例。例如，可以使用 padding-bottom 技巧或 JavaScript 监听图片加载事件来动态调整容器高度。
使用开发者工具验证 aspect-ratio 的计算结果
使用浏览器开发者工具可以验证 aspect-ratio 的计算结果。在 Elements 面板中选中图片元素，查看 Computed 样式中的 aspect-ratio 属性。如果设置了 aspect-ratio: 16/9 auto，计算结果应显示为 16/9。如果图片加载后计算结果变为 auto，说明 auto 值生效。如果计算结果始终为 auto，说明 aspect-ratio 属性未生效，可能是 CSS 语法错误或浏览器不支持。
除了查看计算样式，还可以使用浏览器控制台检查图片元素的属性。在控制台中输入 getComputedStyle(element).aspectRatio 可以获取计算后的 aspect-ratio 值。如果返回值为 auto，说明 aspect-ratio 属性未生效或被覆盖。如果返回值为具体的比例（如 1.7778），说明 aspect-ratio 属性已生效。通过这种方式，可以快速定位 aspect-ratio 未生效的原因，并采取相应的修复措施。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。