【Next.js】Imageを親要素のサイズに合わせる方法

以下のように記述することでImageを親要素のサイズに合わせられます。

import Image from 'next/image'
 
export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="500px"
        fill
        style={{
          objectFit: 'contain',
        }}
      />
    </div>
  )
}

親要素にはposition: "relative", position: "fixed", position: "absolute"のいずれかを設定する必要があります。