Question

我正在使用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中声明？

谢谢！

Answer 1

花了多年时间试图解决这个问题后，我最终放弃了mPDF并使用了domPDF，因为它支持我需要的overflow: hidden属性。只是发布以防其他人遇到类似的问题！

mPDF将图像翻转并隐藏在容器

1 个答案: