How to use css to implement a circular avatar frame

This article mainly introduces how to use css to realize a circular avatar frame, which has certain reference value. Now I share it with you. Friends in need can refer to it

1. Method 1

Directly set the img to a circle. In this case, if the image is not square, the image will be stretched

<img class="circleImg" src="../img/photo/img.jpg"  />

The corresponding css is

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

boder-radius is the width of the image Half

2. Method 2

Set by background image

<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;
}

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

The display effect is

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use css to achieve text wrapping

How to use CSS3 to achieve the effect of text origami

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