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)

<img  class="circleImg lazy"  src="/static/imghw/default1.png"  data-src="../img/photo/img.jpg"     / alt="How to implement a round avatar in css" >

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

<div class="bgImg"></div>

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!