Comment implémenter un avatar rond en CSS

Comment implémenter un avatar circulaire en CSS : Vous pouvez directement définir l'image pour qu'elle soit circulaire, comme [border-radius : 30px;]. Il convient de noter que si l'image n'est pas carrée avec cette méthode, l'image sera étirée.

peut être réalisé des deux manières suivantes :

Méthode 1 : définir directement l'image sur un cercle Dans ce cas, si le. l'image n'est pas Carrée, l'image sera étirée

(Partage vidéo d'apprentissage : tutoriel vidéo css)

<img  class="circleImg" src="../img/photo/img.jpg"  / alt="Comment implémenter un avatar rond en CSS" >

Le css correspondant est :

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

le rayon de bordure correspond à la moitié de la largeur de l'image.

Méthode 2 : Définir l'image de fond

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

Le css correspondant est :

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

Si l'image glissée n'est pas carrée, elle s'affichera proportionnellement à la largeur, alors la taille de l'arrière-plan est définie sur La largeur et la hauteur de l'image sont automatiques. Si elle doit être affichée proportionnellement à la hauteur, alors background-size:auto 60px;.

Effet de réussite :

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!