Question

我知道有类似的问题，但没有解决我的问题。我想用mPDF做的是：

Page 1: Text for item 1
Page 2: Full width and height image to cover the page with an image of item 1
Page 3: Text for item 2
Page 4: Full width and height image to cover the page with an image of item 2
...

以下代码以我想要实现的方式拉伸图像：

    body {
        background-image:url("image1.jpg");
        background-image-resize: 5;
        background-position: top center;
    }

但这会导致在每个页面上设置图像（我知道，它是body元素）。所以我尝试了以下内容：

<div style='
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:url("image1.jpg");
        background-image-resize: 5;
        background-position: top center;
    '></div>

但这不起作用。所以我尝试使用相同的代码，只使用颜色，而不是图像：

    <div style='
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #F00;
        '>
    </div>
    <div style="page-break-before: always;"></div>

这是有效的。整个页面都是红色的。那么如何用图像来实现呢？

有什么想法吗？

Answer 1

经过大量的试用后，我发现，这样做的简单方法就是将HTML代码分成不同的部分，然后用单独的WriteHtml调用插入它们。例如：

// Create object
$mpdf = new \mPDF('utf-8');

// Create first text page
$mpdf->WriteHTML('<p>Text for item 1</p>');

// Add a new page with the image
$mpdf->AddPage();
$mpdf->WriteHTML("<html><body style='background-image:url(\"image1.jpg\"); background-image-resize: 5; background-position: top center;'></body></html>");


// Create second page
$mpdf->AddPage();
$mpdf->WriteHTML('<p>Text for item 1</p>');

...

Answer 2

大小限制：编写HTML时，图像大小会自动限制为当前页边距和页面位置。在Image（）函数末尾添加了一个额外的参数，您可以覆盖它：

<?php
// the last "false" allows a full page picture
$mpdf->Image('files/images/frontcover.jpg', 0, 0, 210, 297, 'jpg', '', true, false);

这对于例如文件的封面。

这可以使用HTML和CSS这样实现：

<div style="position: absolute; left:0; right: 0; top: 0; bottom: 0;">
    <img src="/files/images/frontcover.jpg" 
         style="width: 210mm; height: 297mm; margin: 0;" />
</div>

有关更多信息，请参见https://mpdf.github.io/what-else-can-i-do/images.html#size-constraint。

Answer 3

我尝试过Sunchock的回答，但并没有为我工作，但是经过一些修改，我终于创建了完整的图像封面（第一个PDF页面）。

这是代码。基本上，我删除了img标签，并将尺寸样式移到了div上。最后，以html样式（可能是div中的内联样式）将图像添加为背景。您可以在mpdf doc here

中找到有关background-image-resize标签的更多信息

<style>
#cover {
  background-image: url("http://php72.com/resources/image.png");
  background-image-resize: 6;
}
</style>

<div id="cover" style="position: absolute; left:0; right: 0; top: 0; bottom: 0; width: 210mm; height: 297mm;">
</div>

MPdf - 整页大小的图像，但仅适用于单页

3 个答案: