CSSを使用して円形のアバターフレームを実装する方法

この記事では、CSSを使用して円形のアバターフレームを実現する方法を主に紹介します。必要な友達に共有します。

1. 画像を直接設定します。円形、この場合、画像が正方形でない場合、画像は引き伸ばされます

<img class="circleImg" src="../img/photo/img.jpg"  />

対応するCSSは

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

です

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

方法2

2で設定します。背景画像

<p class="bgImg"></p>

対応 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;

表示効果

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS を使用してテキストの折り返しを実現する方法

CSS3 を使用してテキストの折り紙効果を実現する方法

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