Maison > Article > interface Web > 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!