How to implement a round avatar in css

How to implement a circular avatar in css: You can directly set the img to be circular, such as [border-radius: 30px;]. It should be noted that if the image is not square using this method, the image will be stretched.

can be achieved in the following two ways:

Method 1: Directly set the img to a circle. In this case, if the picture is not Square, the image will be stretched

(Learning video sharing:css video tutorial)

The corresponding css is:

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

boder-radius is half the width of the image.

Method 2: Set through the background image

The corresponding css is:

.bgImg{ border-radius: 30px; width:60px; height:60px; background: url("../img/photo/img.jpg") no-repeat center; background-size:60px; }

If the dragged image is not square, it will be displayed in proportion to the width, then the background-size is set to The image width and height are auto. If it needs to be displayed in proportion to the height, then background-size:auto 60px;.

Achievement effect:

Related recommendations:CSS tutorial

The above is the detailed content of How to implement a round avatar in css. For more information, please follow other related articles on the PHP Chinese website!