[TailwindCSS] Image CSS 속성

<Image>컴포넌트에서 이미지가 잘리거나 비율이 유지되면서 크기 조정되는 동작은 주로 CSS의 object-fit 속성과 관련된다.

 

1. Object-fit 속성

TailwindCSS를 사용하면 다음과 같은 유틸리티 클래스를 활용할 수 있습니다:

• object-cover: 이미지가 잘리지만 크기에 맞춰 채워짐.
• object-contain: 이미지 비율 유지, 여백이 생길 수 있음.
• object-fill: 이미지가 왜곡되며 크기에 맞춰짐.
• object-none: 원본 크기로 표시.
• object-scale-down: 비율 유지하면서 크기를 줄임.

object-fit: cover (잘림)

• 설명: 이미지를 지정된 width와 height에 꽉 채웁니다. 크기 비율이 맞지 않을 경우 초과되는 부분을 잘라냅니다.
• 사용 예: 배경 이미지, 썸네일 등에 적합.
• 결과: 잘린 상태로 중앙에 맞춰 표시.

<Image
  src={item.imageUrl}
  alt="Example"
  width={300}
  height={300}
  className="object-cover w-full h-full"
  unoptimized
/>

 

object-fit: contain (비율 유지)

• 설명: 이미지를 width와 height에 맞추되, 비율을 유지하면서 여백이 생길 수 있습니다.
• 사용 예: 원본 이미지가 왜곡되지 않아야 하는 경우.
• 결과: 여백이 생기거나, 이미지가 비율을 유지하며 한쪽으로 쏠림.

<Image
  src={item.imageUrl}
  alt="Example"
  width={300}
  height={300}
  className="object-contain w-full h-full"
/>

 

 

object-fit: fill (왜곡)

• 설명: 이미지를 width와 height에 강제로 맞춥니다. 이미지가 왜곡될 수 있습니다.
• 사용 예: 정사각형 또는 고정된 크기에 강제로 맞추어야 할 때.
• 결과: 이미지가 왜곡되어 비율이 달라짐.

<Image
  src={item.imageUrl}
  alt="Example"
  width={300}
  height={300}
  className="object-fill w-full h-full"
/>

 

object-fit: none (원본 크기)

• 설명: 이미지를 원본 크기로 표시하며, width와 height를 무시.
• 사용 예: 원본 크기 유지가 필요할 때.
• 결과: 이미지가 잘리거나 공간을 초과할 수 있음

<Image
  src={item.imageUrl}
  alt="Example"
  width={300}
  height={300}
  className="object-none w-full h-full"
/>

 

object-fit: scale-down (최적 크기)

• 설명: 원본 크기와 contain 크기 중 더 작은 크기로 표시.
• 사용 예: 원본 크기를 유지하면서도 제한된 공간 안에 맞춰야 할 때.
• 결과: 크기를 줄이되 비율을 유지.

<Image
  src={item.imageUrl}
  alt="Example"
  width={300}
  height={300}
  className="object-scale-down w-full h-full"
/>

 

2. Next.js Image 컴포넌트의 처리

Next.js의 <Image> 컴포넌트는 브라우저 최적화를 지원하며, 기본적으로 object-fit: cover와 유사한 동작을 합니다.

 

• layout="intrinsic": 이미지의 원본 비율 유지.
• layout="fill": 부모 요소를 꽉 채우도록 크기 조정.
• layout="responsive": 부모 요소 크기에 따라 비율 유지.