Next.JS Image `layout=’fill’` is broken

The wrapping div should have position: relative:

export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px', position: 'relative'}}>
        <Image src={"/i.png"} layout="fill"/>
      </div>
    </div>
  )
}

This is a consequence of how position: absolute works. It’s containing block will be the nearest ancestor element that has any position value but static (the initial value).

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)