Bootstrap 中的嵌入 pdf 不是全高

Question

Answer 1

您有 2 个额外的规则集可以按预期工作但是您需要...

...在 HTML 中更正此问题：

<div class="flexible-container-embed">

对此：

<div class="flexible-container">

...并将其添加到

.flexible-container

CSS 规则集：

padding-bottom: 100%;

添加这 2 个规则集时，将它们放入

<style>

元素中，然后将其添加到

<head>

元素内的最后一个位置。请访问下面的 Plunker 链接查看示例。

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    /* This blank line was probably:
    || padding-top: 56.25%;
    */
    height: 0;
    overflow: hidden;
}
 
/* This ruleset says:
|| "Apply the following properties and their values to ANY `<iframe>`,
|| `<object>`, or `<embed>` THAT IS A CHILD OF any element with the 
|| class of `.flexible-container`.
*/
.flexible-container iframe,   
.flexible-container object, 
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

当您应用这 2 个规则集时，您已经为包装

<object>

的 div 指定了

.flexible-container-embed

类，但这两个规则集都适用于具有

.flexible-container

类的元素，以及 它的任何子级为 <iframe>

 的元素、

<object>

或

<embed>

。  基本上，删除类名中的

-embed ~~部分。~~

接下来是

padding-bottom

 属性。通常为 56.25%，当应用于 iframe 容器时，适当的上下文可以保持 9 的高度和 16 的宽度。这对于宽屏幕格式视频来说很好，但对于 PDF 来说不太好，因为 PDF 可能具有长宽比为 8:11 或 72%（我在演示中使用了 100%，因为这是您所要求的，预计编辑将包含 72% 版本。）如果我们将填充与

height:0

 结合起来，我们会得到一个类似于“shrinkwrap”的容器，根据内容的宽度调整其高度。

更新：由于 PDF 插件添加了填充，从 100% 到 72% 没有明显的变化。

我将

<object>

更改为

<iframe>

，因为它们更通用，您也可以使用

<embed>

。回顾这个

PLUNKER

Answer 2

以 100% 的高度显示 PDF 文件是相当困难的。您可能想要采用 Bootstrap 的“响应式嵌入式媒体”方法，因为结果相当不错，而且麻烦也更少。

Chrome 中的结果：

chrome embedded PDF Firefox 中的结果：

firefox embedded PDF 源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <div class="embed-responsive embed-responsive-4by3">
            <object data="test.pdf" type="application/pdf">
                <p>
                    Your browser does not support embedded PDF files.<br>
                    <a href="test.pdf">Click here to
                    download the PDF file.</a>
                </p>
            </object>
        </div>
    </div>
</body>
</html>

请记住，并非所有浏览器都支持嵌入 PDF 文件，因此

<object>

标签内有此通知。

Bootstrap 中的嵌入 pdf 不是全高

问题描述投票：0回答：2

2个回答

最新问题

Bootstrap 中的嵌入 pdf 不是全高

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2