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

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

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

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

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

対応する CSS は:

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

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

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

対応する 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 サイトの他の関連記事を参照してください。