I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered.
I have gone through the responses shared here and attempted them. The images exist in the DOM, but they are off-screen and fail to display.
The dimensions of the images vary e.g., 1280x15141, 1280x14333.
Following the example from the docs link.
<main className="mx-auto max-w-7xl ">
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100%' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
</main>
No image appears on the display even though they are present in the DOM.
https://i.sstatic.net/s4zjB.png
Update: Based on recommendations, I included a height.
<section className="flex flex-col">
{chapter.images.map((img) => (
<div key={img} style={{ position: 'relative', width: '768px', height: '100px' }}>
<Image alt="Mountains" src={img} layout="fill" objectFit="contain" />
</div>
))}
</section>
https://i.sstatic.net/N4vWK.png
Alternatively, using a plain img tag approach.
When employing the images within <img> tags, I manage to witness the image while setting the width along with the default height.
<section className="flex flex-col gap-2">
{chapter.images.map((img) => (
<div key={img} className="mx-auto md:w-4/5">
<img alt="Mountains" src={img} />
</div>
))}
</section>
Nevertheless, my intention is to leverage NextJs Image component.
How may I achieve this?