mPDF 将图像渲染为翻转并隐藏在容器中

Posted 2023-05-07

【中文标题】mPDF 将图像渲染为翻转并隐藏在容器中

【英文标题】：mPDF to render image as flipped and hidden within container

【发布时间】：2018-02-09 09:02:47

【问题描述】：

我正在使用 mPDF(v7.0) 从我的 html 创建 PDF。我想在 div (.container-sizing) 中创建一个包含图像的 PDF。我必须能够使用 CSS 将图像定位在 .container-sizing 中并缩放和翻转图像。

我已经尝试过以下方法：

CSS

.container-sizing 
    overflow: hidden;
    position: relative;
    width:600px;
    height:430px;
 
 .img 
     max-height: 100%;
     position: absolute;
     top: -100px;
     left: -100px;
     right: 0;
     bottom: 0;
     margin: auto;
     transform:scale(1, -1);
 

HTML

<div class='container-sizing'> 
    <img src='images/my-image.jpg' alt='' class='img'/>
</div>

这不起作用，因为它忽略了包含 div 上的overflow:hidden - 这在定位图像时非常重要。相反，我尝试将图像设置为背景图像，效果很好，但后来我遇到了transform: scale(1, -1) 的问题。尽管 mPDF 的文档说这是受支持的，但它在应用于背景图像时似乎不起作用。

CSS：

.container-sizing 
    width:600px;
    height:430px;
    overflow: hidden;

.img 
    background-image: url('images/my-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width:600px;
    height:430px;
    transform:scale(1, -1) ;                             

HTML：

<div class='container-sizing'>
    <div class='img'></div>
</div>

有没有人知道如何让这个工作产生一个 pdf，显示图像是如何在 css 中声明的？

谢谢！

【参考方案1】：

在花了很长时间试图弄清楚这一点之后，我最终放弃了 mPDF 并改用 domPDF，因为它支持我需要的 overflow: hidden 属性。只是发布以防其他人遇到类似问题！