next/image 컴포넌트 이미지의 비율을 유지

Next.js의 next/image 컴포넌트를 사용하실 경우 이미지의 비율을 유지하면서 채우고 싶으시다면, 다음과 같이 layout과 objectFit 속성을 사용하실 수 있습니다:

import Image from 'next/image'

<Image
  src="your_image_source" // 이미지 경로
  alt="description"       // 이미지 설명
  layout="fill"           // 부모 요소를 꽉 채움
  objectFit="cover"       // 이미지 비율 유지, 부모 요소를 꽉 채우며 필요한 부분 잘라냄
/>

코드를 설명드리자면,
layout="fill" 속성을 이용하면 Image 컴포넌트가 부모 요소를 가득 채우게 됩니다.
objectFit="cover" 속성은 이미지의 원본 비율을 유지하면서 이미지를 확대/축소해 필요한 부분만 잘라내어, Image가 부모 요소의 크기를 정확히 맞추도록 합니다.
그래서 원본 이미지의 비율은 그대로 유지되고, 이미지가 부모 요소를 가득 채우게 됩니다. 필요하다면 objectFit 속성 값을 contain으로 변경하여 이미지 콘텐츠가 부모 요소를 꽉 채우지 않고, 이미지 전체가 보이도록 할 수 도 있습니다. 이렇게 설정할 경우, 이미지가 부모 요소보다 작게 보일 수도 있습니다.
혹시 'next/image'의 다른 옵션을 알고 싶다면, Next.js의 공식 문서를 참고해보시기 바랍니다: https://nextjs.org/docs/api-reference/next/image