next.js - 異なる画像サイズで Nextjs Image コンポーネントを使用する

Question

すべてが一意のサイズを持つ画像で Next.js Image コンポーネントを使用しようとしています。彼らの例は、画像が親の div の幅と高さに引き伸ばされることを示しています。それらをラッピングしようとしましたが、動的な画像サイズに対応する方法がわかりません。それぞれの比率に合わせて幅と高さを設定したいと思います。ティア。

これが私のコードです（画像は配列から来ています）-高さを設定していないため、ページには何もレンダリングされません。Tailwind を使用h-autoしても表示されません。

<div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>