img默认行内且无尺寸预留，加载前盒模型塌陷导致布局跳动；需用aspect-ratio锁定宽高比并配width，加背景兜底，且img的src必须真实可加载。
picture 里 img 的默认样式不是靠 CSS “额外设置”出来的，而是由浏览器对 img 元素的原生渲染行为 + 显式声明的尺寸控制共同决定的；没写宽高、没设 aspect-ratio、也没用占位背景时，图片加载前盒模型塌陷，降级后样式就不可控。
为什么降级后图片位置/大小会乱跳
常见现象：WebP 加载失败 → 回退到 JPG → 页面文字上推、布局重排（CLS）、容器突然撑开或收缩。这不是“样式没写好”，是浏览器根本没预留空间。
-
img默认是行内元素，不设宽高时，其盒模型依赖图片内容加载完成才确定尺寸 -
picture不提供尺寸继承，source失败也不会把尺寸“传给”img - 只靠
width: 100%或max-width: 100%无法锁定高宽比，缩放时拉伸或裁剪
必须用 aspect-ratio 锁定盒模型
现代方案首选 aspect-ratio，它让容器在图片加载前就具备稳定尺寸，且响应式缩放不破坏比例。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写法：
img { aspect-ratio: 16 / 9; width: 100%; height: auto; } - 必须搭配
width（如100%或固定值），否则aspect-ratio不生效 - 不要写
height: 200px—— 它会覆盖aspect-ratio，导致非响应式硬高度 - 旧浏览器（IE、Android 4.4）不支持？加回退：
img { height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; }+img::before { content: ""; display: block; }（仅当需兼容时）
降级图加载失败时的视觉兜底不能只靠 alt
alt 文本只在图片加载失败且元素有渲染高度时才可见；若盒模型塌陷，alt 就被压扁甚至不可见——此时需要 CSS 主动接管。
- 给
img加背景：background: linear-gradient(#eee, #eee); background-size: cover; - 必须配
background-repeat: no-repeat和background-origin: content-box，否则灰色块平铺或错位 - 若父容器有
padding，不加background-origin: content-box，渐变会从边框起始，留白不对齐 - 别用
data:image/png;base64,...做背景——部分 Android WebView 解析失败，导致空白
picture 降级失败时，img 的 src 必须真实可加载
很多人以为 picture 会自动把所有 source 失败的情况“导向”img，但实际逻辑是：img 只在无匹配 source（media 条件全不满足）时才启用；如果 source 匹配了却 404，浏览器仍尝试加载它，并不会 fallback 到 img。
- 所以
img的src本身必须指向一个 HTTP 200 的资源（如/assets/placeholder-800x450.jpg） - 禁止写
src=""、src="broken.jpg"或src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="—— 部分浏览器视其为“无加载意图”，alt也不显示 - 如果业务上真要动态 fallback，必须用
onerror内联处理：onerror="this.src='/fallback.jpg'; this.onerror=null;"
最易被忽略的一点：样式稳定 ≠ 图片可用。即使 aspect-ratio 和背景都写了，只要 img src 返回 404 或 CORS 拦截，盒子还在，但用户看到的就是一块灰——这时候得查服务器返回状态码和 Content-Type，而不是调 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
