如何用mPDF实现图片按高度铺满A4页并裁剪溢出（无变形）

我之前也碰到过类似的坑，mPDF对部分CSS属性的支持确实和浏览器有差异，尤其是background-size:cover在绝对定位容器下的渲染容易出问题。针对你的需求（让图片占满A4页面高度297mm，按比例缩放宽度并裁剪溢出），这里有两个可靠的解决方案：

方法一：改进HTML/CSS写法 #

既然浏览器里的逻辑是对的，我们调整一下CSS写法来适配mPDF的渲染规则。用img标签代替背景图，配合容器的溢出隐藏和居中定位，效果和background-size:cover完全一致：

$html = '<div style="position: absolute; top: 0; left: 0; width: 210mm; height: 297mm; overflow: hidden;">
  <img src="'.$imageSource.'" style="height: 100%; width: auto; position: absolute; left: 50%; transform: translateX(-50%);" />
</div>';
$pdf->WriteHTML($html, 2);

原理说明： #

• 外层容器精确设置为A4页面的尺寸（宽210mm，高297mm），并开启overflow:hidden裁剪溢出部分
• 图片设置height:100%强制占满容器高度，width:auto自动保持原始比例缩放
• 通过left:50%和transform:translateX(-50%)让图片水平居中，这样左右超出容器的部分就会被裁剪掉，完美实现你要的效果

方法二：使用mPDF原生Image()方法 #

如果HTML/CSS的方式还是有问题，直接用mPDF提供的Image()方法更可控，通过计算偏移量来实现居中裁剪：

// 获取图片原始尺寸
list($origWidth, $origHeight) = getimagesize($imageSource);

// 目标高度设为297mm，计算缩放后的宽度
$targetHeight = 297;
$scaleRatio = $targetHeight / $origHeight;
$targetWidth = $origWidth * $scaleRatio;

// 计算水平偏移量，让图片居中显示（裁剪左右多余部分）
$xOffset = ($targetWidth - 210) / 2;

// 调用mPDF的Image方法，设置偏移量实现裁剪
$mpdf->Image(
    $imageSource,
    x: -$xOffset, // 向左偏移，裁剪左侧多余部分
    y: 0,
    h: $targetHeight,
    w: $targetWidth,
    resize: false, // 保持比例缩放，不强制拉伸
    forcedresize: false
);

原理说明： #

• 先计算图片按目标高度缩放后的总宽度，如果这个宽度超过A4的210mm宽度，就计算需要裁剪的左右部分
• 通过设置x参数为负的偏移量，让图片向左偏移，这样页面只显示中间的210mm宽度部分，高度刚好占满297mm

为什么之前的背景图方法不行？主要是因为mPDF对background-size:cover结合绝对定位的渲染逻辑和浏览器不一致，即使是最新版也可能存在兼容性bug，而上面两种方法都是绕开这个问题，用更可靠的方式实现需求。

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