移动端图片加载后变形？用 aspect-ratio 预设比例
在图片加载完成前，使用 aspect-ratio 属性可以保持容器比例，防止页面布局抖动。
检查图片容器是否缺少宽高比设置
在移动端页面中，图片加载前容器通常只有默认的块级尺寸，导致图片加载瞬间高度变化。浏览器在解析 HTML 时，如果 img 标签没有设置 width 和 height 属性，也没有 aspect-ratio 样式，容器高度会根据内容自动伸缩。这种高度变化会挤压周围文字和元素，造成页面布局抖动。检查时，打开移动端页面的开发者工具，查看图片元素的计算样式，确认 width 和 height 是否为 auto。如果两者都是 auto，且没有 aspect-ratio 属性，说明当前容器没有预设比例，容易在图片加载后发生变形。
使用浏览器开发者工具的 Elements 面板，选中图片元素并查看 Computed 样式。重点查看 width 和 height 属性的值。如果 width 和 height 都是 auto，且没有 aspect-ratio 属性，则说明该元素没有固定的宽高比。此时，当图片资源开始下载并渲染时，浏览器会根据图片的原始宽高比调整元素尺寸，导致容器高度发生突变。这种突变会破坏页面原有的排版结构，影响用户阅读体验。因此，第一步是确认图片容器是否缺少必要的宽高比约束。
在 CSS 中添加 aspect-ratio 属性
针对检查中发现的容器，需要在 CSS 中添加 aspect-ratio 属性来约束元素的宽高比。aspect-ratio 属性允许开发者定义元素的期望宽高比。语法格式为 aspect-ratio: 宽度 / 高度。例如，对于常见的 16:9 比例，可以设置 aspect-ratio: 16 / 9。对于正方形图片，可以设置 aspect-ratio: 1 / 1。如果图片是竖向的长方形，可以设置 aspect-ratio: 9 / 16。在代码中，将 aspect-ratio 属性添加到图片的 CSS 类中。这样，即使图片尚未加载，浏览器也会根据指定的比例计算容器的高度。
在 CSS 中添加 aspect-ratio 属性后，浏览器会根据指定的比例计算元素的高度。如果容器宽度是固定的，高度会自动计算以保持比例。如果容器高度是固定的，宽度会自动计算。这种计算在图片加载前就会完成，从而保持容器尺寸的稳定。需要注意的是，aspect-ratio 属性需要至少有一个尺寸是自动的才能生效。如果 width 和 height 都被固定为具体像素值，aspect-ratio 将不会改变元素的尺寸。因此，在设置 aspect-ratio 时，应确保 width 或 height 中至少有一个是 auto。
验证 aspect-ratio 是否生效
验证 aspect-ratio 属性是否生效，可以通过模拟图片加载过程来观察。在开发者工具中，右键点击图片元素，选择“Edit as HTML”。将 src 属性清空，使图片处于未加载状态。此时，观察页面上图片容器的高度是否保持稳定。如果 aspect-ratio 属性设置正确，即使图片未加载，容器也会保持预设的宽高比。然后，恢复 src 属性，重新加载图片。此时，图片加载完成后，容器的高度应该保持不变，不会发生突变。如果容器高度在图片加载前后发生变化，说明 aspect-ratio 属性可能未正确应用或被其他样式覆盖。
另一种验证方法是使用浏览器提供的“网络”面板，模拟慢速网络。在“网络”面板中，勾选“Disable cache”，并将网络速度设置为“Slow 3G”。刷新页面，观察图片加载过程中的布局变化。如果 aspect-ratio 属性生效，在图片下载期间，容器的高度应该保持稳定，不会因为图片尺寸的变化而抖动。图片加载完成后，容器高度应与图片的原始比例一致。如果发现布局抖动，说明 aspect-ratio 属性未正确设置，或者被其他 CSS 规则覆盖。
处理替换元素加载后的比例变化
对于 img 等替换元素，aspect-ratio 属性的行为需要特别注意。根据规范，如果同时指定了 aspect-ratio 和 auto 关键字，且元素是替换元素（如 img），则指定的比例会在内容加载前使用。一旦内容加载完成，浏览器会应用 auto 值，使用图片的固有宽高比。这意味着，如果图片的固有宽高比与预设的 aspect-ratio 不同，图片加载完成后，容器的高度可能会发生调整。为了保持加载前的比例，可以只指定 aspect-ratio，而不指定 auto。这样，无论图片是否加载，容器都会保持预设的比例。
如果希望图片加载完成后保持预设的比例，而不是使用图片的固有比例，可以设置 aspect-ratio: 宽度 / 高度 auto。这样，在图片加载前，容器会保持预设的比例。在图片加载完成后，浏览器会使用图片的固有宽高比，这可能会导致容器高度发生变化。如果希望图片加载完成后也保持预设的比例，可以设置 aspect-ratio: 宽度 / 高度，而不指定 auto。这样，无论图片是否加载，容器都会保持预设的比例。但是，如果图片的固有宽高比与预设的比例不同，图片可能会被裁剪或变形。因此，需要根据实际需求选择合适的设置方式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。