How to use CSS to implement a circular avatar frame

This article mainly introduces about how to use CSS to achieve a circular head frame, has a certain reference value, now share to everyone, have the need for friends can refer to

1, Method one

Set the IMG directly to a circle, in which case the picture is stretched if the picture is not a square

The corresponding CSS is

. circleimg{  border-radius:30px;  width:60px;  height:60px; }

Boder-radius is half the width of the picture

2. Method Two

Set with background map

<p class= "Bgimg" ></p>

The corresponding CSS is

. bgimg{   border-radius:30px;  width:60px;  height:60px;   Background:url (".. /img/photo/img.jpg ") No-repeat Center;  background-size:60px;}

Drag the picture is not square, then according to the width of the display, the background-size is set to the width of the picture, the height of auto, if required by the height of the scale display, then Background-size:auto 60px;

The display effect is

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!