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

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

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

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

(동영상 공유 학습) : css 비디오 튜토리얼 )

<img  class="circleImg lazy"  src="/static/imghw/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:auto 60px;입니다.

얻은 효과:

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

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