Home > Article > Web Front-end > 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" 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!