Help w/ circular avatars

[Jake]

Hi everyone! 

I'm looking for help with a glitch in some code on my forum. I've added coding to make the avatars circular instead of square. However, linked avatars are not displaying properly (only the sides of the image are circular, the top and bottom are flat). Avatars that are uploaded to the forum don't appear to be affected. I'll attach an example below.

Any help is greatly appreciated! Thanks.

-Jake

Link to forum: school-buses.boards.net/forum

Attachments:

[Pandorica]

I actually just did this while working on our mini profiles! I am using Custom Mini Profile for ours, in my custom css for the avatar display option I used this:



/* Avatar Shape */
.mini-profile.test-mp .avatar
{
 object-fit: cover;
 border-radius: 50%;
 height: 100px;
 width: 100px;
 border: 2px solid #A1C9EB;
}
I just tested and it is working with an avatar I linked as well. Hopefully something here helps (you can of course remove/adjust the border)

[Jake]

Hi Pandorica,

I tried your suggestion but unfortunately I didn't have much luck. I wonder if there is another string of code that I need to add elsewhere? Something that would force linked images to match the avatar height requirement (150x150). I'm still somewhat new with CSS. I'll attach a screenshot below of what the linked avatar looked like with your code. 

Attachments:

[Kami]

Is the avatar that the user uploaded perfectly square and at least 150 x 150 pixels ? You can right click and select "open image in new tab", then hover over the tab and see what the dimensions are.

I would bet dollars to doughnuts that the user's icon is wider than it is tall, which means that only the parts that "hit" the edges of the 150 x 150 pixel area will become rounded as the icon is resized to fit those parameters.

If I am correct, then there isn't anything you can do without distorting the icon to 150 x 150 px. If you want to do that, let me know, but it'll make any non-square images look weird as heck.

[Pandorica]

Ah yes, with the border it is more clear. As Kami mentioned, it's an issue of image height. Since they are below the limit, you can see it doesn't reach the top of the circle border. You could post a suggestion for users in your forum to not use images smaller than the recommended size of 150x150 to avoid this problem.