最简单方法是直接用 width 和 height 属性（如 width="400"），但仅支持无单位像素值，且不保持宽高比；CSS 设置更灵活但 object-fit 无效，需结合 viewBox 或 fallback 策略。
直接用 width 和 height 属性最简单，但只适用于像素值
HTML 标签支持原生的 width 和 height 属性，写法就是纯数字，不带单位：width="400"、height="300"。浏览器会按像素渲染，兼容性覆盖所有主流版本，包括 IE6+。
常见错误是写成 width="400px" 或 width="400em"——这些值会被忽略，退回到默认尺寸（通常为 300×150）。也别指望它自动保持原始资源的宽高比，它只是“强制拉伸”容器区域。
- 只设
width不设height：高度由浏览器按默认比例（或内部 content 决定）推算，结果不可控，不推荐 - 两个都设：能精确控制显示区域大小，但若嵌入内容（如 SVG、PDF）本身比例不匹配，会出现裁剪或留白
- 设了但没生效？检查是否被 CSS 的
width/height覆盖——HTML 属性优先级低于内联 style，但低于 !important 的 CSS 规则
CSS 设置更灵活，但要注意 object-fit 不起作用
是替换元素（replaced element），和 object-fit 对它无效。你给 加 object-fit: cover，浏览器会完全忽略。
所以想让嵌入内容（比如 SVG 或 PDF）在固定容器里等比缩放，不能靠 object-fit，得换思路：
- 用
width和height属性或 CSS 尺寸定死容器大小 - 确保嵌入资源（如 SVG）自身带
viewBox，并设preserveAspectRatio="xMidYMid meet"，这样它才能响应容器尺寸自动缩放 - 如果嵌的是 PDF，
是唯一可靠方式；CSS 控制仅影响外框，不改变 PDF 渲染逻辑
响应式场景下，避免用固定像素，改用 CSS 百分比 + max-width
移动端或流式布局中，硬写 width="800" 会导致横向溢出。此时应放弃 HTML 属性，改用 CSS：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
object {
width: 100%;
max-width: 800px;
height: auto;
}
注意：height: auto 在 上效果有限——它不会像
- SVG：若含
viewBox，height: auto可触发等比缩放 - PNG/JPEG 嵌在
里？别这么干，该用 - 无
viewBox的 SVG 或 Flash（已淘汰）：height: auto基本无效，必须显式设height或用 JS 读取尺寸后动态设置
IE 兼容性问题：width/height 属性有效，但 fallback 内容要写对
IE11 及更早版本不支持 object-fit，但这对 本来就不相关；真正要小心的是 fallback 行为。IE 对 的降级逻辑更严格：只有当 data 资源加载失败（404、MIME 不匹配、插件缺失）时，才会渲染内部 HTML 内容。
典型错误写法： —— 在 IE 中，如果 SVG 加载成功但渲染异常（比如缺少 viewBox），
- fallback 必须是完整 HTML 片段，比如段落、图片、甚至另一个
- 测试时别只看 Chrome，要用真实 IE 环境或 Edge IE 模式，确认
data路径、MIME 类型（type="image/svg+xml"）都正确 - 企业内网常见问题：本地 file:// 协议下，IE 默认阻止
加载，需调整安全设置或改用服务器环境
真正麻烦的不是设宽高，而是嵌入内容本身的可伸缩性—— 只管框，不管里面的东西怎么填。SVG 得靠 viewBox，PDF 没办法缩放，Flash 已死。别把 layout 问题误判成标签用法问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
