标签的 width 和 height 属性必须为无单位纯数字（如 width="400"），不支持 "400px" 或 "50%"，否则静默失效；其值用于初始布局，可被 css 覆盖，但 object-fit 对其无效。
object 标签的 width 和 height 属性必须写纯数字
width 和 height 是 <object></object> 的原生 HTML 属性，浏览器直接识别，无需 CSS。但它们只接受无单位的像素值，比如 width="400" 合法，width="400px" 或 width="50%" 会被忽略——不是报错，是静默失效。
常见错误是复制 CSS 写法粘贴进标签里，结果尺寸没变。尤其在嵌入 SVG、PDF 或旧式插件时，父容器明明设了宽高，<object></object> 却撑不满，大概率就是这里填了带单位或百分比。
- 必须写成
<object data="chart.svg" width="600" height="400"></object> - 如果需要响应式，不能靠这两个属性，得用 CSS 覆盖（见下一条）
- 这两个属性值会作为初始渲染依据，影响页面布局流，比 CSS 更早介入
CSS width/height 会覆盖 HTML 属性，但需注意 display 行为
给 <object></object> 加 style="width: 100%; height: 300px;" 是有效的，且优先级高于 HTML 的 width/height 属性。但要注意：默认 display 是 inline，百分比宽度在 inline 元素上不生效。
所以实际用 CSS 控制尺寸时，通常要显式设 display: block 或 display: inline-block：
<object data="report.pdf" style="width: 100%; height: 50vh; display: block;"></object>- 若父容器是 flex 或 grid，
display可能被继承，但别依赖——显式声明更稳 - 用
vh/vmin等相对单位时，CSS 是唯一可行路径，HTML 属性不支持
object-fit 对 object 标签无效，别白费劲
object-fit 只对替换元素（<img>、<video></video>、<iframe></iframe>）起作用，<object></object> 不在此列。哪怕你写了 style="max-width:90%"，浏览器完全无视，图片或 SVG 还是按原始比例拉伸或留白。
想实现类似 cover 的效果？没捷径：
- 如果是 SVG，改其内部
viewBox和preserveAspectRatio属性 - 如果是 PDF 或外部资源，只能靠裁剪容器 +
overflow: hidden模拟 - 某些场景下，换用
<iframe></iframe>（如嵌 PDF）反而更可控，因它支持object-fit
嵌入 SVG 时 width/height 会覆盖 viewBox 缩放逻辑
当 <object></object> 加载 SVG 文件时，SVG 自身的 viewBox 和 width/height 属性共同决定渲染行为。但 <object></object> 上写的 width/height 会强制覆盖 SVG 的固有尺寸设定，导致比例错乱。
例如 SVG 文件头是 <svg viewbox="0 0 800 600"></svg>，你却在 <object></object> 上写 width="200" height="100"，结果就是非等比压缩——不是你想的“缩略图”，而是变形图。
- 安全做法：SVG 内部设
width="100%" height="100%"，<object></object>只控制容器尺寸，交由 SVG 自己适配 - 若必须固定尺寸，优先用 CSS 设置
<object></object>宽高，并确保 SVG 的preserveAspectRatio="xMidYMid meet" - 调试时右键“在新标签页打开 SVG”，看它单独加载是否正常——能排除是 SVG 本身问题还是
<object></object>干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
