object标签无法直接响应式，需用CSS容器控制；推荐padding-bottom+absolute定位或aspect-ratio降级方案，PDF嵌入存在缩放、滚动等硬伤，建议用PDF.js等专业方案。
object 标签本身不响应式，也不能直接设 aspect-ratio 或靠 width="100%" 自动维持比例——它会按原始尺寸撑开容器，或在小屏上溢出、留白、裁切。真要响应式嵌入，必须用 CSS 控制包裹容器，再约束 object 的行为。
为什么直接写 width="100%" height="500" 会失败
浏览器把 width 和 height 属性转为内联样式（如 width: 100%; height: 500px;），一旦你加了 width: 100% 的 CSS，高度就卡死在 500px，小屏横向滚动；若删掉 height 属性，多数浏览器按默认 300×150 渲染，比例错乱且不可控。
-
object不继承父容器的宽高比逻辑，也不响应padding-bottom百分比 - PDF、SVG 等资源加载后不会触发重排，容器高度不会自动适配内容
- 移动端 Safari 对
object的scrolling和缩放支持极弱，容易白屏或点击无响应
用 padding-bottom + position: absolute 构建等比容器
这是兼容 IE9+、iOS Safari 8+、所有现代浏览器的可靠方案，核心是让容器“自己算高”，再把 object 塞进去填满。
- 父容器设
position: relative; width: 100%; height: 0; padding-bottom: 56.25%;（16:9）或75%（4:3） -
object设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 必须移除
object默认的display: inline，加display: block防止底部多出空白 - 别给
object设margin或border，它们会破坏绝对定位的贴边效果
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<object data="chart.svg" type="image/svg+xml" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;">
<p>Your browser doesn’t support SVG.</p>
</object>
</div>
现代写法：aspect-ratio 必须作用于容器，且需降级
aspect-ratio: 16 / 9 不能直接写在 object 上——旧版 Safari（≤15.3）、Firefox ≤88 会忽略，导致高度为 0，整个内容消失。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 只写在包裹
div上：.embed-container { width: 100%; aspect-ratio: 16 / 9; } -
object保持width: 100%; height: 100%; display: block; - 用
@supports (aspect-ratio: 1/1)包裹新写法，老浏览器走padding-bottomfallback - PDF 嵌入时慎用
object-fit：它对 PDF 无效，仅对图片类资源起作用
object 响应式嵌入 PDF 的实际限制
就算容器比例正确，PDF 在 object 中仍面临三重硬伤：
- 无法控制缩放级别，小屏下文字过小、按钮不可点
- 不支持触摸拖拽滚动（尤其 iOS Safari），用户只能靠双指缩放，体验断裂
- 部分 Android WebView 会拦截
data中的相对路径，需确保 PDF URL 绝对可访问 - 更稳妥的做法是用
PDFObject库自动 fallback 到iframe或下载链接
真正难的不是让 object “看起来满屏”，而是让它在各种设备上“能看、能点、能读”——这往往意味着放弃纯 HTML 方案，改用 PDF.js 或服务端渲染预览页。
