Next.js Image 사진 비율 안깨지게 하는 법 | object-fit cover

새로운 프레임워크나 라이브러리를 쓸 때 가장 시간 아까운 것은 그 도구의 새로운 문법을 익히지 못해서 쉬운 부분에서 머뭇거리는 것 같다.  이번에 Next.js (pages router)를 하면서 이미지 최적화를 위하기도, next에서 권장해서, Image를 사용하고 있다. 

 

보통은 이미지 비율을 그대로 가져기위해 background-size: cover;를 많이 사용할 것 이다.

즉, 본래 이미지의 가로 세로 비율을 그대로 가져가면서 배경을 다 덮는 css 방법이다. 

 

Next.js 공식문서를 해석해보자면, 

"fill" 은 이미지의 가로, 세로 길이를 모를 때 유용하다. 

부모 요소는 반드시  position이 "relative", "fixed", "absolute" 중에 하나이어야 한다. 기본값으로는 "absolute"이다. 
(...)
object-fit: "cover"은 전체 컨테이너를 채우면서 비율을 유지한채로 잘린다. 이것을 위해서는 부모요소에 overflow: "hidden" 이 필요하다. 

 

 

즉, background-size: cover;를 사용하려면, 아래 예시처럼 fill과 style을 함께 사용해주면서 부모요소에 위의 두 조건을 충족시켜 줘야 한다. 

import Image from 'next/image'
 
export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="500px"
        fill
        style={{
          objectFit: 'cover',
        }}
      />
    </div>
  )
}

 

 

역시 블로그를 찾아보는 것보다 공식문서를 보면 더 명확히, 클리어하게 알 수 있다. 

 

 

 

 

++ onLoad 프로퍼티도 잘 쓰면 유용하다. 

 

[공식문서]

Components: <Image> | Next.js