title: Next.JS Image `layout='fill'` is broken
body: <p>When using the Next.js image component, the docs claim that: &quot;When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit.&quot;</p>
  <p>However, this is not what's happening. What it actually does is fill the image to take up the entire screen in a fixed position that doesn't respect scrolling. I've tried each <code>object-fit</code> value possible for the <code>img</code> and none has worked.</p>
  <p>To reproduce, make a new next project and put an image in your public folder. Do this:</p>
  <pre><code>export default function Home() {
    return (
      &lt;div&gt;
        &lt;div style={{width: '100px', height: '100px'}}&gt;
          &lt;Image src={&quot;/i.png&quot;} layout='fill'/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Image will take up the entire screen. You can try styling the <code>Image</code> component but I haven't found a way to make it work.</p>
  <p>Does anyone know how to fix this, or why it's happening?</p>