mPDF将方形图像转换为圆形

Question

是否可以将图像作为mPDF中的圆圈？ 看了一遍，找不到任何明确的答案。

对我来说，这个图像显示正常，除了它是一个正方形，这应该使它成为一个圆圈。

CSS

img{
    width: 150px;
    height: 150px;
    border-radius: 150px;
}

PHP

$inputPath = '../web_content/cool_cat.jpg';
<div class="profile_img">
    <img src="'.$inputPath.'"/>
</div>

Answer 1

通过将图像用作背景图像而不是元素，找到了解决此问题的方法。

因此，在使用mpdf创建pdf的PHP文件中，我只创建了一个div，可以将图像路径作为$ inputPath。似乎现在工作正常。

HTML / PHP

<div class="profile_img" style="background-image: url('.$inputPath.');"></div>

CSS

.profile_img {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    border-style: solid;
    border-color: white;
    border-width: medium;

    overflow: hidden;

    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
 }

Answer 2

IMG元素不支持Border-radius。

请参阅mPDF手册中的Supported CSS。

不幸的是，即使将图像放入支持border-radius元素的div中，也不能伪造。

<div style="width: 150px;
    height: 150px;
    border-radius: 150px; 
    border: 2px solid maroon; 
    overflow: hidden;">
        <img src="assets/butterfly_ProPhoto.png" />
</div>