直接用width和height属性设像素值最可靠，仅接受纯数字（如width="400"），不支持单位或百分比；必须同时设置二者以防渲染异常，且object-fit对其无效。
直接用 width 和 height 属性设像素值最可靠
浏览器对 <object></object> 的 width 和 height 属性原生支持稳定，不依赖 CSS，适合 Flash、PDF、嵌入网页等需要明确尺寸的场景。这两个属性只接受纯数字（单位默认为像素），写成 width="400" 有效，width="400px" 或 width="50%" 会失效。
- 必须同时设置
width和height才能避免部分浏览器（如旧版 Safari）渲染异常或留白错位 - 若嵌入的是图片（如
type="image/jpeg"），仅设一个属性时，另一个维度不会自动等比缩放——它可能按原始尺寸渲染，导致溢出或截断 - 像素值建议取整数，避免小数引发某些安卓 WebView 渲染抖动
width 和 height 支持百分比但有前提条件
百分比值（如 width="100%"）在 <object></object> 中可用，但生效前提是父容器有明确高度（对 height="100%" 尤其关键）。否则多数浏览器会将 height="100%" 解析为 0，整个区域塌陷。
- 常见失效场景：父元素是
div且未设height或min-height，或父级用了display: flex但没设align-items: stretch -
width="100%"相对父容器宽度计算，一般更稳定；height="100%"必须逐级向上追溯到有显式高度的祖先，中间任一环节缺失都会中断继承 - 在响应式布局中，优先考虑用 CSS 控制容器尺寸，再让
<object></object>的width/height继承，而非直接写百分比
CSS 覆盖 width/height 属性时容易踩坑
给 <object></object> 元素加 style="width: 100%; height: 400px;" 是合法的，但行为和 <img> 不同：CSS 设置的宽高会覆盖 HTML 属性，但部分旧浏览器（IE9–10）对 <object></object> 的 CSS 尺寸解析不一致，尤其当 type="text/html" 时可能忽略 height。
- 不要混用：例如 HTML 里写
width="300"，又在 CSS 里写width: 100%，可能导致 Chrome 渲染两次尺寸，触发重排 - 如果要用
max-width或aspect-ratio，必须确保父容器有display: block（默认是 inline），否则max-width不生效 -
object-fit对<object></object>无效——它只作用于替换元素（如<img>、<video></video>），嵌入的 PDF 或网页内容无法被裁剪或缩放填充
嵌入网页（type="text/html"）时尺寸控制最不可靠
用 <object data="xxx.html" type="text/html"></object> 嵌入页面时，width/height 仅控制外层容器大小，内部文档仍按自身 CSS 渲染。这意味着即使你设了 height="500"，若内嵌页有 body { height: 100vh }，它仍可能撑满视口并出现滚动条。
- 无法通过外部控制内嵌页的
overflow，<object></object>本身不提供scrolling属性（那是<iframe></iframe>的） - 跨域内嵌时，Chrome 会阻止
height动态调整，即使 JS 尝试修改object.style.height也常被忽略 - 真正需要精确尺寸匹配的场景（如管理后台嵌入子系统），应优先用
<iframe></iframe>替代 —— 它对尺寸、滚动、跨域通信的支持更完整
<object></object> 用于加载 PDF（type="application/pdf"）时，不同浏览器内置 PDF 查看器对 width/height 的响应程度差异极大。Chrome 通常尊重设定，Firefox 可能强制最小宽度（约 200px），Safari 在 iOS 上甚至会忽略 height 并始终显示滚动条。这种不一致性意味着——别指望单靠 HTML 属性实现跨浏览器像素级一致。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
