Search code examples
htmlcssdompdf

Make an image in dompdf cover all of the first page

I am trying to get an image to fill the full page of a dompdf pdf, and every page after that have a header and footer. With the code I have below, it creates the image attached. I have done everything I can think of to rectify this, including resizing said image to 595px by 842px(A4 Paper Size). Is there something special I need to be doing?

$html .="<style> 
@page {
    margin-top:130px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.flyleaf {
    page-break-after: always;
    margin:-130px;
    padding:0;
  }
.flyleaf img {
  min-width: 100%;
  min-height: 100%;
}
.header,
.footer {
    width: 100%;
    text-align: center;
    position: fixed;
}
.header {
    top: -110px;
}

.footer {
    bottom: 0px;
}
</style>";
$html .='<div class="flyleaf" width="100%"><img style="max-width:100%;max-height:100%;" src="'.$header.'"></div>';
$html .='<div class="header">';
$html .='<td style="width:100px;"><img src="'.$logo.'"></td>';
$html .='</div>';
$html .='<div class="page">';
$html .='//Page content here';
$html .='</div>';
$html .='<div class="footer">';
$html .='//Footer content here';
$html .='</div>';

Image Example

Solution

  • First, dompdf may or may not fully support min-width/min-height styling. See issue #825.

    Second, you've styled your image using max-width/max-height. dompdf will scale the image proportionally, and if both dimensions are max 100% then the scaling will stop with whichever side reaches that limit first. Because of this if your image does not have the same proportionality as the page the scaled image might not fill the visible area. If you specify the width this should be less of a problem, though sometimes dompdf has trouble near the bottom edge of a document.

    Or, at least, that's how it's supposed to work. I'd have to do more testing to find the current limitations. But some quick testing with v0.6.2 does not quite bear this out.

    Lastly, don't forget that dompdf has default page margins of 1.2cm. 100% width/height will be based on the content area of the body element which is constrained by the page margins.