Hey everyone, running into a frustrating layout issue with Next.js <Image> and hoping someone can point me in the right direction.

I have a component with two layered images - a background SVG and a drink image positioned on top of it. With a regular <img> tag I'd just slap h-auto on it and call it a day, but since Next.js <Image> requires you to define dimensions (or use fill), I'm losing my mind trying to get them to align properly.

Here's my current setup:

`<div className="slider-wrapper"> <div className="flavors"> {flavorlists.map((flavor) => { return ( <div className={`relative z-30 lg:w-[50vw] lg:flex-none w-[90vw] h-80 md:h-120 lg:h-full self-center`} key={flavor.name} > <Image fill src={`/images/${flavor.color}-bg.svg`} className="object-contain" alt={`${flavor.color}-bg`} /> <div className="absolute w-[50%] h-[80%] left-0 translate-x-1/2 "> <Image fill className="object-contain" src={`/images/${flavor.color}-drink.webp`} alt={`${flavor.color}-drink`} /> </div> </div> ); })} </div> </div>

The problem is that the <Image> component's rendered box doesn't match the actual visible image dimensions (especially with object-contain), so the drink image doesn't align with the background the way I intend. With a plain <img> I could control this naturally with h-auto, but fill doesn't give me that flexibility.

Has anyone solved this cleanly? Do I need to use width/height props instead of fill and calculate the aspect ratio manually? Or is there a Tailwind trick I'm missing?

Any help appreciated :pray:

I've attach images of how it should look and how it looks right now