阿凡达麻烦圆角

Question

I'm trying to figure out what's the best method to do the following: Let's say I have a circle with color x where I want to put an avatar in, my goal is to make the avatar image round too in order to make the result look a lot nicer.

I can do this with php-gd, but will have probably need to do a lot of calculations(unless I've missed out on some gd function), is there a better or faster way to tackle it eg css?

tia

Answer 1

If I was you I would use CSS3 for simplicity. The below will turn the image into a circle and give it a 1px circle border.

div.avatar{
    width:30px; height:30px; border:solid 1px #000;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
}

div.avatar img{
    width:30px; height:30px;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}

<div class="avatar"><img src="" /></div>

• CSS3 isnt supported by old versions of IE

Answer 2

Easiest would be using simple CSS selectors:

<img class="avatar" src="" />

and in your CSS file:

.avatar {
    border-radius: 50%;
}

Yup, it's that simple. Check out my Codepen example: http://codepen.io/usersnap/pen/udJgc

Answer 3

You're actually better to use a bit of CSS trickery to do this. Basically you want to set up a transparent PNG positioned above the image, using it as a mask for the image. For an example check out this post about it .

I wouldn't recommend using a CSS3 solution (border-radius) without some kind of backup, as it's much less supported. But I guess if your okay with only having modern support then CSS3 would be the better option.