object标签不支持aspect-ratio和object-fit，需通过父容器设置aspect-ratio或padding-top实现比例控制，PDF嵌入须用width/height属性，不可仅依赖CSS。
object 标签本身不支持 aspect-ratio 或 object-fit
直接给 <object> 元素写 aspect-ratio: 16 / 9 或 object-fit: cover 是无效的——它不是替换元素（replaced element），浏览器不识别这些属性对其生效。常见误判是把它当 <img> 或 <video> 一样处理，结果样式完全没反应。
真正起作用的是它的「内容」：如果 <object> 加载的是 SVG、PDF 或 Flash（已淘汰），渲染行为由内部格式决定；如果是 HTML 文档（type="text/html"），则由子文档自身样式控制。
所以问题本质不是“怎么设置 <object> 的长宽比”，而是“怎么让它的容器表现得像有固定长宽比”。
用父容器 + aspect-ratio + overflow 控制视觉比例
最简方案是放弃操作 <object> 自身，转而约束它的父容器：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
aspect-ratio: 16 / 9（现代浏览器）或降级用padding-top: 56.25%+position: relative -
<object>设为position: absolute; top: 0; left: 0; width: 100%; height: 100% - 父容器加
overflow: hidden防止内容溢出破坏比例 - 确保
<object>的data指向资源能撑满（如 SVG 建议带viewBox，PDF 建议用嵌入式 viewer）
示例：
<div class="aspect-16x9">
<object data="chart.svg" type="image/svg+xml"></object>
</div>
<style>
.aspect-16x9 {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
}
.aspect-16x9 > object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
加载 PDF 时固定比例的特殊处理
若 <object> 用于嵌入 PDF（type="application/pdf"），浏览器内置 PDF 查看器（如 Chromium）**忽略所有 CSS 尺寸控制**，只响应 width 和 height HTML 属性（像素值）。
- 必须用
<object data="a.pdf" width="800" height="450">，不能只写 CSS - 仅设
width="100%"会导致高度塌陷（PDF viewer 不解析百分比） - 想响应式？只能 JS 监听容器尺寸变化，动态重写
width/height属性 - 替代方案：用
<iframe>+src="a.pdf#zoom=page-width"，但同样受限于 viewer 行为
为什么不用 background-image 替代？
有人想把 <object> 内容转成背景图来控制比例，这不可行：
-
background-image只能显示静态快照，无法交互（SVG 失去事件，PDF 不可翻页） -
<object>的核心价值在于可编程性（如contentDocument访问 SVG DOM）和语义（无障碍、SEO） - 强行降级会丢失功能，不是“兼容方案”，而是“功能阉割”
真要兼顾比例与交互，唯一可靠路径是：用容器锁比例 + <object> 填满 + 内容源自身适配（如 SVG 带 viewBox，PDF 用响应式生成工具导出）。
