Heim >Web-Frontend >CSS-Tutorial >So implementieren Sie einen runden Avatar in CSS

So implementieren Sie einen runden Avatar in CSS

王林
王林Original
2020-11-18 10:59:284149Durchsuche

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.

So implementieren Sie einen runden Avatar in CSS

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:

So implementieren Sie einen runden Avatar in CSS

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn