标签不支持width和height属性，因其不渲染内容、不参与布局；防CLS关键在标签必须设置HTML原生width/height属性以预留宽高比。
source 标签根本不支持 width 和 height 属性
<source></source> 是 <picture></picture> 的子元素，用于提供备选图片资源，它本身**不渲染任何内容**，也不参与布局。浏览器只用它来匹配 sizes 和 srcset，最终渲染的是包裹它的 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" >。所以给 <source></source> 写 width 或 height 不仅无效，还会被 HTML 解析器忽略——连警告都不会抛。
防止响应式图片布局偏移，必须在 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" > 上设 width/height
哪怕你用了 <picture></picture> + 多个 <source></source>，防 CLS 的关键仍在最外层的 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" > 标签：
- 必须写
width和height两个 HTML 属性（不是 CSS），值为原始图片的像素尺寸，如width="1200" height="800" - 这两个值决定浏览器首次解析时推导出的宽高比，和
srcset选中的实际图片尺寸无关——哪怕最终加载的是 300×200 的缩略图，预留空间仍按 1200×800 的比例算 - 如果
<img alt="HTML source标签的width与height？防止响应式图片布局偏移" >没写width/height，而只靠<source></source>切换，浏览器在srcset解析完成前仍以 0×0 占位，CLS 照样发生 - 常见错误：
<picture><source srcset="..."><img src="..." alt="HTML source标签的width与height？防止响应式图片布局偏移" ></source></picture>中的<img alt="HTML source标签的width与height？防止响应式图片布局偏移" >忘了加width/height，或只写了其中一个
响应式场景下，<img alt="HTML source标签的width与height？防止响应式图片布局偏移" > 的 width/height 怎么填才不拉伸
填法和单张 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" > 完全一致：取原始图片的**固有像素尺寸**（比如原图是 2400×1600，就写 width="2400" style="max-width:90%"），而不是视口宽度或容器宽度。原因如下：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 浏览器只用这两个值算宽高比（2400 / 1600 = 3 / 2），不直接当显示尺寸用
- 实际显示尺寸由 CSS 控制，例如
img { width: 100%; height: auto; }—— 这时它会按 3:2 比例缩放，不会失真 - 填错比例（如原图 4:3 却写
width="800" height="600"是对的，但写成width="800" height="500"就会拉伸） - 不要写
width="100%"或height="auto"—— 这些是无效值，浏览器当没写
现代方案：aspect-ratio 可以替代，但不能丢掉 HTML width/height
aspect-ratio: 4 / 3 在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持，但它只是 CSS 层的增强，不是 HTML 原生能力：
立即学习“前端免费学习笔记（深入）”；
- 如果只用
aspect-ratio而不写 HTML 的width/height，旧版 Safari、部分 SSR 环境、或 iframe 嵌入场景中，仍会回退到 0×0 占位 - 正确做法是两者共存：
<img src="..." style="max-width:90%" style="max-width:90%" alt="">+img { aspect-ratio: 4 / 3; width: 100%; height: auto; } - 这样新浏览器用
aspect-ratio，老浏览器靠 HTML 属性兜底，防 CLS 更稳
<picture></picture> 时，会自动抹掉 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" > 上的 width/height，以为“反正有 srcset”。结果页面一上线，Lighthouse 的 CLS 分数就飘红——问题不在 <source></source>，而在那个被悄悄删掉属性的 <img alt="HTML source标签的width与height？防止响应式图片布局偏移" >。 
