posted 2 months ago
이전 버전의 layout prop 대신, fill prop을 사용하여 반응형 이미지를 쉽게 구현할 수 있습니다.
또한, 컴포넌트의 기본 이미지 요소를 style 또는 className을 사용하여 스타일링할 수 있습니다.
import Image from 'next/image'
const Index = () => {
return (
<div>
<Image
src="https://picsum.photos/800/600"
layout="fill"
className="w-48 aspect-square md:w-72 xl:w-48"
/>
</div>
)
}
<Image
src="https://picsum.photos/800/600"
fill
...
/>
style
또는 className
을 통해 적용할 수 있습니다.<Image
width="0"
height="0"
sizes="100vw"
className="h-auto w-full"
src={avatar?.image}
alt={avatar?.title}
/>