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

不言

リリース： 2018-07-14 17:38:32

オリジナル

9883 人が閲覧しました

この記事では、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 サイトに注目してください。