如何使对象标签内的 PDF 响应？答案

【问题标题】：How to make a PDF inside object tag responsive?如何使对象标签内的 PDF 响应？
【发布时间】：2014-03-12 09:01:13
【问题描述】：

我正在尝试使我的网站具有响应性，并且我在正文中的对象标签中有一个 PDF 查看器，就像这样：

<object width="950" height="800" data="images/ah.pdf"></object>

由于定义了宽度和高度，我将其改为：

<div id="custom">
<object data="images/ah.pdf"></object>
</div>

然后使用百分比调整css部分中的div。我的问题是整个PDF查看器没有显示，而是一个侧面有滚动条的小盒子，所以你必须左右滚动和上下滚动。有什么办法可以让它根据窗口大小调整 PDF 大小，而不仅仅是单独调整 PDF 查看器？我希望这尽可能清楚。谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

将您的对象标签更改为：

<object data="images/ah.pdf" style="width: 100%; height: 100%; display: block;"></object>

您可以将样式添加到类中，然后将该类包含在您的对象标签中。或者使用其他变体来应用样式。宽度和高度将与其父容器大小相同。

【讨论】：

【解决方案2】：

@Adam 答案可能有效。老实说，我处理的不多/但我会告诉你，我已经为显示器设置了 iframe，它们是响应式兼容的

这就是我要做的

<div class="content">
    <div class="embed-container">
        <iframe src="/images/myPDF.pdf" frameborder="0"></iframe>
    </div>
</div>

.content {
   width: 50%;
   margin: 0px auto;
}

.embed-container {
   height: 0;
   width: 100%;
   padding-bottom: 56.25%; /* play with this until right */
   overflow: hidden;
   position: relative;
}

.embed-container iframe {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

【讨论】：