Maison >interface Web >tutoriel CSS >Comment implémenter un avatar rond en CSS

Comment implémenter un avatar rond en CSS

王林
王林original
2020-11-18 10:59:283916parcourir

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.

Comment implémenter un avatar rond en CSS

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 :

Comment implémenter un avatar rond en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn