image

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

새로운 프레임워크나 라이브러리를 쓸 때 가장 시간 아까운 것은 그 도구의 새로운 문법을 익히지 못해서 쉬운 부분에서 머뭇거리는 것 같다. 이번에 Next.js (pages router)를 하면서 이미지 최적화를 위하기도, next에서 권장해서, Image를 사용하고 있다. 보통은 이미지 비율을 그대로 가져기위해 background-size: cover;를 많이 사용할 것 이다. 즉, 본래 이미지의 가로 세로 비율을 그대로 가져가면서 배경을 다 덮는 css 방법이다. Next.js 공식문서를 해석해보자면, "fill" 은 이미지의 가로, 세로 길이를 모를 때 유용하다. 부모 요소는 반드시 position이 "relative", "fixed", "absolute" 중에 하나이어야 한다. 기본값으로는 "abs..