Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mPDF turning square image into a circle

Tags:

html

css

php

mpdf

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>
like image 707
jjyj Avatar asked Jan 03 '23 18:01

jjyj


1 Answers

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; 
 }
like image 103
jjyj Avatar answered Jan 12 '23 08:01

jjyj