最简单方法是直接用 width 和 height 属性（如 width="400"），但仅支持无单位像素值，且不保持宽高比；CSS 设置更灵活但 object-fit 无效，需结合 viewBox 或 fallback 策略。
直接用 width 和 height 属性最简单，但只适用于像素值
HTML <object> 标签支持原生的 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 不起作用
<object> 是替换元素（replaced element），和 <img> 类似，但关键区别在于：object-fit 对它无效。你给 <object> 加 object-fit: cover，浏览器会完全忽略。
所以想让嵌入内容（比如 SVG 或 PDF）在固定容器里等比缩放，不能靠 object-fit，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 用
width和height属性或 CSS 尺寸定死容器大小 - 确保嵌入资源（如 SVG）自身带
viewBox，并设preserveAspectRatio="xMidYMid meet"，这样它才能响应容器尺寸自动缩放 - 如果嵌的是 PDF，
<object data="doc.pdf" width="600" height="800">是唯一可靠方式；CSS 控制仅影响外框，不改变 PDF 渲染逻辑
响应式场景下，避免用固定像素，改用 CSS 百分比 + max-width
移动端或流式布局中，硬写 width="800" 会导致横向溢出。此时应放弃 HTML 属性，改用 CSS：
object {
width: 100%;
max-width: 800px;
height: auto;
}
注意：height: auto 在 <object> 上效果有限——它不会像 <img> 那样自动按原始比例计算高度，因为浏览器无法读取嵌入资源的固有尺寸（PDF/SVG 没有统一元数据接口）。实际表现取决于内部 content 类型：
- SVG：若含
viewBox，height: auto可触发等比缩放 - PNG/JPEG 嵌在
<object>里？别这么干，该用<img> - 无
viewBox的 SVG 或 Flash（已淘汰）：height: auto基本无效，必须显式设height或用 JS 读取尺寸后动态设置
IE 兼容性问题：width/height 属性有效，但 fallback 内容要写对
IE11 及更早版本不支持 object-fit，但这对 <object> 本来就不相关；真正要小心的是 fallback 行为。IE 对 <object> 的降级逻辑更严格：只有当 data 资源加载失败（404、MIME 不匹配、插件缺失）时，才会渲染内部 HTML 内容。
典型错误写法：<object data="chart.svg"><img src="fallback.png"></object> —— 在 IE 中，如果 SVG 加载成功但渲染异常（比如缺少 viewBox），<img> 也不会显示。
- fallback 必须是完整 HTML 片段，比如段落、图片、甚至另一个
<object> - 测试时别只看 Chrome，要用真实 IE 环境或 Edge IE 模式，确认
data路径、MIME 类型（type="image/svg+xml"）都正确 - 企业内网常见问题：本地 file:// 协议下，IE 默认阻止
<object>加载，需调整安全设置或改用服务器环境
真正麻烦的不是设宽高，而是嵌入内容本身的可伸缩性——<object> 只管框，不管里面的东西怎么填。SVG 得靠 viewBox，PDF 没办法缩放，Flash 已死。别把 layout 问题误判成标签用法问题。
