Avatar 컴포넌트 안에서 이미지 비율 안깨지게 하기 with Shadcn/ui

(Next.js app router, Shadcn/ui 라이브러리 사용중)

Shadcn/ui 라이브러리에서 제공해주는 기본 Avatar

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

(...)

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

 

부모요소(Group) 추가

Shadcn/ui 는 기본적으로 tailwind CSS 를 사용할 수 있다. 부모 요소인 Avatar에 group을 지정해주고 image를 넣는 부분에는 'object-cover'을 적용해주면 사진이 비율 안깨지게 들어온다. 

<Avatar className="group size-[54px] cursor-pointer"> // size는 가로 세로 크기
            <AvatarImage
              className="object-cover"
              src={session.user.image || '/default-profile-image.png'} // '이미지 url'
            />
            <AvatarFallback>CN</AvatarFallback> // 이미지 alt
</Avatar>