Search code examples
phphtmlcssmpdf

mPDF turning square image into a circle


Is it at all possible to have an image be a circle in mPDF? Looked all over and couldn't find any clear answers.

For me this image shows up fine, except that its a square and this should make it a circle.

css

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

php

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

Solution

  • Found a way to work around this by using the image as a background image instead of an element.

    So within the PHP file which creates the pdf with mpdf I just made a div that can take the image path as $inputPath. Seems to work fine now.

    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; 
     }