img 不设宽高会导致页面塌陷和内容跳动，因浏览器需等图片加载后才计算尺寸；解决方法为显式声明宽高或用 aspect-ratio 配合 width/max-width。
img 标签不写 width/height 时，浏览器根本不知道占位高度
现代浏览器渲染 img 时，如果没设
和
（或没用
），会等图片加载完才计算尺寸——页面先塌陷、内容跳动、懒加载失效。这不是 bug，是规范行为。
解决思路只有两个：显式声明宽高，或用 CSS 强制保留比例空间。前者简单但响应式麻烦；后者靠
，但得注意兼容性。
必须配合
或
才生效，只写
不起作用
旧版 Safari（aspect-ratio，需降级用
百分比 hack
用
时，
控制的是容器比例，不是图片本身拉伸逻辑
懒加载 + aspect-ratio 的最小安全写法
要让
图片在加载前就占对位置，必须让父容器有确定的宽高比，且不依赖图片资源。
推荐直接在
上同时设置
、
和
，现代浏览器优先用
，老浏览器回退到宽高属性：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
/
属性值用于 fallback，不是 CSS 尺寸，不影响响应式布局
让图片自适应容器，
配合
保持比例
别用
这类 hack 套
，容易触发重复加载或尺寸错乱
React/Vue 里动态生成 aspect-ratio 容易漏掉服务端渲染（SSR）场景
组件里根据 props 算出宽高比再拼
字符串，开发时看着没问题，但 SSR 渲染时若图片元数据缺失（比如 CMS 返回的图片没带尺寸），服务端生成的 HTML 就没
，首屏仍会跳动。
后端 API 必须返回图片的
和
字段，前端不能靠 onload 再补
SSR 模板中直接写死
，而不是等 JS 加载后用 JS 设置
Next.js 的
组件默认处理了这点，但自定义
标签时仍要手动传
/
属性
Chrome DevTools 里怎么验证懒加载是否真“占位成功”
打开 Elements 面板，选中图片元素，看右侧 Styles 面板里
标签下
是否为非零值。如果显示
或
，说明
没生效或被覆盖。
检查是否有其他 CSS 设置了
、
或
在 Console 里执行
，确认返回的是具体像素值（如
）
禁用 JS 后刷新页面，观察图片容器是否仍有高度——这是判断 fallback 是否可靠的最直接方式
真正难的不是写对一行
，而是确保从服务端到客户端、从 CSS 到 JS、从开发环境到真实用户设备，这个比例始终可推导、可继承、不被覆盖。
widthheightaspect-ratioaspect-ratioaspect-ratio: 16 / 9widthmax-widthaspect-ratiopadding-topobject-fit: coveraspect-ratioloading="lazy"widthheightaspect-ratioaspect-ratiowidthheightstyle="width: 100%"height: autoaspect-ratioimg { height: 0; padding-top: 56.25% }loading="lazy"styleaspect-ratiowidthheightstyle="aspect-ratio: {{w}} / {{h}}"ImageimgwidthheightComputedheight0pxautoaspect-ratioheight: 0display: nonevisibility: hiddengetComputedStyle(document.querySelector('img')).height"225px"aspect-ratio