mPDF 图像覆盖页面裁剪且无失真

Question

我已经尝试了所有可以想到的组合来获得看起来如此简单易用的东西。

我需要在页面上放置一张图片，A4（210 毫米（高）X 297 毫米（宽）），并使该图片的高度为 100%，即 297 毫米，然后按比例拉伸宽度并裁剪溢出部分（即隐藏在 css 溢出中）。我已经尝试了所有我能想到的与 $mpdf->Image() 的组合，或者像我在 PDF 文件中其他地方所做的那样，使用纯 HTML 和 CSS。例如

<img src="path(to/file.jpg" />

或

<div style="background: url("path(to/file.jpg") center center no-repeat;"></div>

同样，我可以想到所有可能的 CSS 配置。

是否无法在保持宽高比的同时拉伸图像以适应整个页面的高度并裁剪两侧的图像？

我在 MPDF full page background 上看过 background-image-resize，但同样，什么也没有。

如何让图像达到页面高度的 100%（我不在乎我是否必须定义高度（即 297 毫米）或者它是否是一个百分比）使图像按比例缩放并且裁剪两侧多余的图像。

我确定我在这里错过了一些明显的东西。我看不出我做错了什么（我想我现在陷入了一个循环）。

如果我执行回显并在浏览器中查看，显示正常（如预期）的示例

$html = '<div style="
    background: url('.$imageSource.') center center no-repeat;
    position: absolute;
    overflow: hidden;
    height: 297mm;
    width: 100%;
    background-size: cover;
    top: 0;
    left: 0;
"></div>';

但是，对 $pdf->WriteHTML( $html, 2 ) 和 $pdf->Output() 执行相同的操作，图像的高度为 297 毫米，但宽度扭曲了（即它不与高度成比例地拉伸）。

这是生成的 PDF（带有占位符图像）

这就是我想要达到的目标

因此生成的 PDF 得到 "squeezed"。而不是将宽度按比例扩展到高度 (297mm)。

PS. 抱歉缺少实际测试代码。但是我尝试了太多不同的组合，无法重现所有组合。

PPS. 使用最新版本的 mPDF。三天前从GitHub抢来的

Answer 1

因为我在逻辑、CSS 和数学方面遇到了很多问题，所以我想我会在这里与其他为此苦苦挣扎的人分享我最终的工作解决方案。从函数开始

function image( $containerWidth, $containerHeight, $imageSource, $top, $left, $border ){
// Get image width
$imageWidth             = getimagesize( $imageSource )[0];
// Get image height
$imageHeight            = getimagesize( $imageSource )[1];
// Get image aspect ratio
$imageRatio             = $imageWidth / $imageHeight;
// Get container aspect ratio
$containerRatio         = $containerWidth / $containerHeight;
// Decide if image should increase in height or width
if( $imageRatio > $containerRatio ){
    $width                  = ( ( $imageRatio / $containerRatio ) * 100 );
}else{
    $width                  = ( ( $containerRatio / $imageRatio ) * 100 );
}
if( $border ){
    // $border array: 0 = thicknes in points, 1 = type (solid, dotted etc), 2 = color
    $border = 'border: '.$border[0].'pt '.$border[1].' '.$border[2].';';
}
return '<div style="position: absolute; top: '.$top.'mm; left: '.$left.'mm; width: '.$containerWidth.'mm; height: '.$containerHeight.'mm; overflow:hidden; margin:0;'.$border.'"><img src="'.$imageSource.'" style="width: '.$width.'%; margin: 0 -'.( ( $width - 100 ) / 2 ).'%;" /></div>';
}

然后对于居中的整页图像

$image1                     = image( 210, 297, $imageSource[0], 0, 0, null );

或者两张图片叠在一起，其中一张带有白色边框

$image2                     = image( 105, 148, $imageSource[1], 15, 15, null );
$image3                     = image( 105, 148, $imageSource[2], 133, 90, [ 10, 'solid', 'white' ] );

输出

// mPDF options array
$pdfOptions = array(
    'mode'              => 'utf-8',
    'format'                => 'A4',
    'img_dpi'               => 300,
    'dpi'                   => 300,
);
// Declare $pdf and set options
$pdf                    = new \Mpdf\Mpdf( $pdfOptions );
// Stylesheets
$style                  = file_get_contents( __DIR__ . '/path/to/stylesheet.css');
$pdf->WriteHTML( $style, 1 );
$pdf->WriteHTML( $image1, 2 );
$pdf->AddPage();
$pdf->WriteHTML( $image2, 2 );
$pdf->WriteHTML( $image3, 2 );
$pdf->Output();

mPDF 图像覆盖页面裁剪且无失真

mPDF image to cover page with crop and no distortion

html

css

mpdf