PHP中使用mPDF生成PDF时如何设置图片占满全宽？

mPDF图片宽度不生效主要是三个原因：

1. 外层.adlayout容器为绝对定位但未设置宽度和定位坐标，容器本身未占满页面宽度，内部图片设置100%宽度仅能撑满父容器，无法达到页面全宽效果
2. mPDF对图片元素的relative定位适配存在兼容问题，会干扰宽高自动计算
3. 你的示例代码中HTML片段没有正确赋值给$texttt变量，直接拼接在new Mpdf()后面属于语法错误，会导致传入的HTML内容异常

修改方案如下：

• 给.adlayout容器添加width: 100%、left:0、top:0规则，强制容器占满整个页面
• 移除img元素上的relative类，避免样式兼容问题
• 给w-full类添加display:block规则，消除行内元素默认的间距影响
• 修正代码语法，将HTML内容正确赋值给$texttt变量

修改后的完整代码：

<?php

$mPdf = new Mpdf();

$texttt = <<<HTML
<html>
<head>
  <style>
     @page { 
       sheet-size:3.7cm 4cm;
       margin: 0;   
     }
     .adlayout {
       position: absolute;
       overflow: hidden;
       overflow-wrap: break-word;
       border: 1px solid;
       width: 100%;
       left: 0;
       top: 0;
     }
     .w-full {
       width: 100%;
       display: block;
     }           
     .h-auto {
       height: auto;
     }
  </style>
</head>
<body>
  <div class="adlayout">
    <img alt="editor_preview_image" class="w-full h-auto" src="https://personal-shurn.s3-ap-southeast-1.amazonaws.com/tiny2pdf/images/Dahlia-Coralie.96.189.5.jpg"/>
  </div>
</body>
</html>
HTML;

$mPdf->WriteHTML($texttt);
$mPdf->Output("response.pdf", Destination::FILE);

如果修改后仍然存在宽度问题，可以直接将.w-full的宽度规则改为固定物理单位width: 3.7cm !important，mPDF对cm、mm这类物理单位的识别优先级最高，不会出现百分比宽度计算异常的问题。

内容的提问来源于stack exchange，提问作者Gokila Nataraj