CSS에서 둥근 아바타를 구현하는 방법

CSS에서 원형 아바타를 구현하는 방법: [border-radius: 30px;]와 같이 img를 원형으로 직접 설정할 수 있습니다. 이 방법을 사용하면 이미지가 정사각형이 아닌 경우 이미지가 늘어납니다.

은 다음 두 가지 방법으로 달성할 수 있습니다.

방법 1: img를 원형으로 직접 설정합니다. 이 경우 이미지가 정사각형이 아니면 이미지가 늘어납니다

(동영상 공유 학습) :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:auto 60px;입니다.

얻은 효과:

관련 권장 사항:CSS 튜토리얼

위 내용은 CSS에서 둥근 아바타를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!