aspect-ratio 与懒加载
aspect-ratio 一行 CSS 固定宽高比，图片加载前就占好位，页面不抖动；loading="lazy" 让视口外的图片延迟加载，首屏更快。
这两个属性专治“CLS（布局位移）”：有 aspect-ratio 时图片高度不依赖实际文件尺寸，懒加载也不会让下方内容跳动。
- aspect-ratio: 16/9：宽高比固定，可用在 div、iframe、img
- loading="lazy"：进入视口附近才加载（图片/iframe 均可）
- 预占位 + 懒加载组合，CLS 指标直接归零
CSS
/* 视频与图片统一比例，加载前先占位 */ .video { aspect-ratio: 16 / 9; width: 100%; } .video iframe { width: 100%; height: 100%; } /* 正方形头像 */ .avatar { width: 64px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; } /* 不变形的封面图 */ .cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
HTML
<!-- 懒加载 + 预占位：图片在视口外时不下载 --> <img src="big-photo.jpg" width="1200" height="800" loading="lazy" decoding="async" alt="风景照">
本节要点aspect-ratio 固定比例防抖动，loading="lazy" 延迟加载省流量；两者组合体验最佳。
