title: How to set the next/image component to 100% height
body: <p>I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.</p>
  <p>I have tried the following:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Image
      src=&quot;/deco.svg&quot;
      alt=&quot;&quot;
      layout=&quot;fill&quot;
  /&gt;
  </code></pre>
  <p>This snippet compiles successfully, but on the frontend, I see the following error:</p>
  <blockquote>
  <p>Error: Image with src &quot;/deco.svg&quot; must use &quot;width&quot; and &quot;height&quot; properties or &quot;unsized&quot; property.</p>
  </blockquote>
  <p>This confuses me because according to <a href="https://nextjs.org/docs/api-reference/next/image" rel="noreferrer">the docs</a>, these properties are <em>not</em> required when using <code>layout=&quot;fill&quot;</code>.</p>