How to get full image width in mpdf - html

Question

I am using mpdf to convert html page. I have added code like below.
$html=$this->load->view('client_admin/test_poepdf',$data, true);
$pdfFilePath ="Test_".$task_id.'_'.$startdate.'.pdf';
$pdf = $this->m_pdf->load();
$stylesheet ='';
$stylesheet .= file_get_contents(base_url().'assets/css/bootstrap.min.css'); // external css
$stylesheet .= file_get_contents(base_url().'assets/css/icons.css'); // external css
$pdf->WriteHTML($stylesheet,1);
$pdf->WriteHTML($html,2);
$pdf->Output($pdfFilePath, "D");
$pdf->Output($destination2, "F");
I added one image in mpdf page and added width for it like below:
<td style="width:100%;"><img src="<?php echo base_url();?>assets/poeimages/<?php echo $filename;?>" class="side_logos" id="poeid" style="width:1300px;height:auto;"></td>
</tr>
but image width is not applying if i open in browser it is applying. Please help me.

Answer 1

When mPDF generates your PDF it puts nearly all your content inside the "print area". The print area is calculated as: page box minus margins.
______________________________
| | |<- sheet
| |<--+-- crop marks
| ______________________|___|
| | A | |
| | ______________ |<--+-- page box
| | | HEADER | | |
| | D | | B | |
| | | | | |
| | | |<--+---+-- page box minus margins = printed area
| | | | | |
| | | | | |
| | | | | |
| | |___FOOTER_____| | | A: margin-top
| | C | | B: margin-right
| |______________________| | C: margin-bottom
| | D: margin-left
|_____________________________|
Ref: http://mpdf.github.io/paging/using-page.html
From your example, I see you've got your image inside a <table> tag. If the table width (not the <td>) isn't set to 100% then that would further restrict the total width of your image.
You've a couple of options here. You can set the page margins to zero and your table to 100%:
<style>
#page {
margin: 0;
}
table {
width: 100%;
}
</style>
Doing this will mean you need to add left and right margins / padding back into the elements you don't want to have a 100% width though.
Or you can extract your image from the table and place it in a top-level <div> tag which you absolute position on the page:
<div style="position: absolute; left: 0; width: 100%; >
<img src="" />
</div>
Absolute positioning will mean you don't have to mess with the page margins, but you take the image out of the document flow which could cause display problems if you aren't careful.