img 不设宽高会导致页面塌陷和内容跳动，因浏览器需等图片加载后才计算尺寸；解决方法为显式声明宽高或用 aspect-ratio 配合 width/max-width。
img 标签不写 width/height 时，浏览器根本不知道占位高度
现代浏览器渲染 img 时，如果没设 width 和 height（或没用 aspect-ratio），会等图片加载完才计算尺寸——页面先塌陷、内容跳动、懒加载失效。这不是 bug，是规范行为。
解决思路只有两个：显式声明宽高，或用 CSS 强制保留比例空间。前者简单但响应式麻烦；后者靠 aspect-ratio，但得注意兼容性。
-
aspect-ratio: 16 / 9必须配合width或max-width才生效，只写aspect-ratio不起作用 - 旧版 Safari（aspect-ratio，需降级用
padding-top百分比 hack - 用
object-fit: cover时，aspect-ratio控制的是容器比例，不是图片本身拉伸逻辑
懒加载 + aspect-ratio 的最小安全写法
要让 loading="lazy" 图片在加载前就占对位置，必须让父容器有确定的宽高比，且不依赖图片资源。
推荐直接在 <img> 上同时设置 width、height 和 aspect-ratio，现代浏览器优先用 aspect-ratio，老浏览器回退到宽高属性：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" width="800" height="450" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" loading="lazy" alt="示例图">
-
width/height属性值用于 fallback，不是 CSS 尺寸，不影响响应式布局 -
style="width: 100%"让图片自适应容器，height: auto配合aspect-ratio保持比例 - 别用
img { height: 0; padding-top: 56.25% }这类 hack 套loading="lazy"，容易触发重复加载或尺寸错乱
React/Vue 里动态生成 aspect-ratio 容易漏掉服务端渲染（SSR）场景
组件里根据 props 算出宽高比再拼 style 字符串，开发时看着没问题，但 SSR 渲染时若图片元数据缺失（比如 CMS 返回的图片没带尺寸），服务端生成的 HTML 就没 aspect-ratio，首屏仍会跳动。
- 后端 API 必须返回图片的
width和height字段，前端不能靠 onload 再补 - SSR 模板中直接写死
style="aspect-ratio: {{w}} / {{h}}"，而不是等 JS 加载后用 JS 设置 - Next.js 的
Image组件默认处理了这点，但自定义img标签时仍要手动传width/height属性
Chrome DevTools 里怎么验证懒加载是否真“占位成功”
打开 Elements 面板，选中图片元素，看右侧 Styles 面板里 Computed 标签下 height 是否为非零值。如果显示 0px 或 auto，说明 aspect-ratio 没生效或被覆盖。
- 检查是否有其他 CSS 设置了
height: 0、display: none或visibility: hidden - 在 Console 里执行
getComputedStyle(document.querySelector('img')).height，确认返回的是具体像素值（如"225px"） - 禁用 JS 后刷新页面，观察图片容器是否仍有高度——这是判断 fallback 是否可靠的最直接方式
真正难的不是写对一行 aspect-ratio，而是确保从服务端到客户端、从 CSS 到 JS、从开发环境到真实用户设备，这个比例始终可推导、可继承、不被覆盖。
