According to the Next.js image component documentation, it states: "When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit."
However, in reality, the image fills the entire screen in a fixed position that does not respect scrolling behavior. I have experimented with different values for object-fit on the img element but none have had the desired effect.
To replicate this issue, create a new Next.js project and place an image in the public folder. Then follow these steps:
export default function Home() {
return (
<div>
<div style={{width: '100px', height: '100px'}}>
<Image src={"/i.png"} layout='fill'/>
</div>
</div>
)
}
The image will take up the entire screen. Trying to style the Image component did not resolve the issue.
Is there a solution to this problem or an explanation as to why it is happening?