So implementieren Sie einen runden Avatar in CSS

So implementieren Sie einen kreisförmigen Avatar in CSS: Sie können das Bild direkt auf kreisförmig festlegen, z. B. [border-radius: 30px;]. Es ist zu beachten, dass das Bild gestreckt wird, wenn es bei dieser Methode nicht quadratisch ist.

kann auf zwei Arten erreicht werden:

Methode 1: Stellen Sie das Bild direkt auf einen Kreis ein. Wenn das Bild in diesem Fall nicht quadratisch ist, wird es gestreckt

(Teilen von Lernvideos). : CSS-Video-Tutorial )

<img  class="circleImg lazy"  src="/static/imghwm/default1.png"  data-src="../img/photo/img.jpg"     / alt="So implementieren Sie einen runden Avatar in CSS" >

Das entsprechende CSS lautet:

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

Der Randradius ist halb so breit wie das Bild.

Methode 2: Stellen Sie

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

über das Hintergrundbild ein. Das entsprechende CSS lautet:

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

Wenn das gezogene Bild nicht quadratisch ist, wird es proportional zur Breite angezeigt Breite und Höhe auf „Auto“ einstellen. Wenn Sie die Höhe usw. berücksichtigen müssen, stellen Sie für die proportionale Anzeige „Hintergrundgröße: Auto“ auf 60 Pixel ein.

Erzielter Effekt:

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen runden Avatar in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!