只写 width 不写 height 是最安全的保比方案，浏览器自动按原始宽高比计算 height 实现等比缩放，兼容所有浏览器，但需注意 width 值不带单位、父容器宽度需可控、避免与 CSS height 冲突。
只写 width 不写 height 是最安全的保比方案
浏览器会读取图片原始宽高比（来自 EXIF 或下载后解析），自动算出 height 值，实现等比缩放。这是 HTML 原生行为，不依赖 CSS 或 JS，兼容性覆盖所有现代和旧版浏览器。
必须注意：width="300" 有效，width="300px" 会被忽略——HTML 属性值不能带单位；同时，这个方案只在父容器宽度固定或可控时稳定，若父容器本身响应式变窄，图片仍按 300px 固定显示，可能溢出。
- 适用场景：文章内嵌图、CMS 输出的正文图片、需要 SSR 友好占位的静态内容
- 风险点：原始图宽高比错误（如裁剪后未更新 EXIF）会导致自动计算的
height失准 - 别和 CSS 冲突：一旦写了
img { height: 100%; }，HTML 的自动推算就失效
width 和 height 同时写 = 强制拉伸，不是保比
同时指定两个值，浏览器完全无视原始比例，强行缩放到你写的像素尺寸。这不是“控制显示”，而是“覆盖原始信息”。常见于设计稿直接抄数：width="600" height="400" 插入一张 1200×800 的图，结果加载前占 600×400 空间，图一加载完立刻撑大——造成 CLS（累积布局偏移）。
这种写法仅适合图标、按钮内嵌小图等有明确容器约束的场景，且建议提前用工具统一缩放原图再写属性，而非靠浏览器实时缩放。
- 典型错误：Markdown 渲染器自动生成
img标签时，后端没传原始尺寸，硬塞的width/height和实际图不符 - 性能影响：浏览器需对大图做实时缩放，低端设备可能出现卡顿
- SEO 风险：爬虫可能因尺寸与内容图不匹配，降低图片相关性评分
用 style="max-width: 100%; height: auto;" 替代纯 HTML 属性
这是现代响应式页面的推荐写法。它让图片在父容器变窄时不溢出，在容器足够宽时保持原尺寸，且始终等比缩放。相比 width: 100%，max-width: 100% 更安全——小图不会被无谓拉伸。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
但必须配 height: auto，否则浏览器不会自动推算高度，可能导致截断、撑开布局或意外拉伸。单独写 max-width: 100% 在部分旧版 Safari 中仍有失真风险。
- 关键细节：父容器若没设
width或max-width，max-width: 100%实际无效 - 兼容性：支持所有主流浏览器，包括 IE11+
- 注意不要混用：如果父容器用了
display: flex且没设align-items，height: auto可能表现异常
需要填满固定容器时，优先用 object-fit 而非硬调 width/height
当容器宽高已知（比如头像框、卡片图区），直接设 width: 200px; height: 150px; 再加 object-fit: cover;，比靠 HTML 属性或单纯 CSS 缩放更可靠。它等比缩放并裁剪边缘，避免白边或变形，适合封面类图片。
但要注意：object-fit 不提供布局占位能力——若没配合 width/height 或 aspect-ratio，图片加载前仍可能引发布局跳动。
- 兼容性提醒：
object-fit在 IE 中完全不支持，需降级方案（如 background-image） -
height: auto在object-fit场景下失效，此时比例由容器决定，图只是被裁剪填入 - 真正防 CLS 的组合是：
aspect-ratio: 4/3; width: 100%;（现代浏览器） + fallbackheight属性（旧浏览器）
实际项目里最容易被忽略的，是 HTML width/height 属性和 CSS 规则之间的隐式冲突——它们看起来互不干扰，但一旦 CSS 中出现 height: 100% 或 max-height，原生占位就会失效，而这种问题往往只在特定设备或缓存状态下才暴露。
