import Image from "next/image";
<div className="relative basis-3/5">
<Image
className="object-cover"
src={대충 url}
alt={대충 username}
priority
fill
sizes="650px"
/>
</div>
fill
- 사진의 너비와 높이를 잘 모를 때 부모 요소 중
relative
, absolute
, fixed
를 찾아(absolute와 비슷) 사진 크기를 맞추는 속성
object-contain(object-fit: contain)
을 추가해주면 사진 비율 깨짐 없이 채울 수 있고, object-cover(object-fit: cover)
를 추가하면 비율이 깨지면서 꽉 채운다. 공식 사이트에서는 둘 중 하나를 넣는 걸 추천한다.
priority
- 사진들은 대체로 lazy loading이 일어난다.
- 하지만 첫 화면에서 바로 보여줘야할 사진들은 priority 속성을 부여해 미리 로드될 수 있도록 한다.
- 모든 사진에 priority를 넣으면 처음 로딩이 오래 걸리니 주의
참고 사이트