CSSで丸いアバターを実装する方法

CSS で円形のアバターを実装する方法: [border-radius: 30px;] のように、画像を円形に直接設定できます。この方法を使用すると画像が正方形でない場合、画像が引き伸ばされてしまうことに注意してください。

これは、次の 2 つの方法で実現できます:

方法 1: 画像を直接円に設定します。画像は正方形ではありません。画像は引き伸ばされます

(学習ビデオ共有: css ビデオ チュートリアル)

<img  class="circleImg lazy"  src="/static/imghwm/default1.png"  data-src="../img/photo/img.jpg"     / alt="CSSで丸いアバターを実装する方法" >

対応する CSS は:

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

boder-radius は画像の幅の半分です。

方法 2: 背景画像を通して設定する

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

対応する CSS は次のとおりです:

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

ドラッグした画像が正方形でない場合は、幅に比例して表示されますの場合、background-size は「画像の幅と高さは自動です。高さに比例して表示する必要がある場合は、background-size:auto 60px;」に設定されます。

達成効果:

関連する推奨事項: CSS チュートリアル

以上がCSSで丸いアバターを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。