Resize a Next.js Image component inside a div - css

Question

I try to make a section that contains on a side some text and on the other side an Image that should be responsive (i.e. that becomes smaller when the window's size is also becoming smaller).
Using a simple <img src="/myimage.extension" alt="describe my image" /> does work perfectly. But as soon as I use the Next.JS Image component (in order to benefit from the optimization it does), it breaks the responsiveness.
Indeed, to make a kind of hero section with a responsive image I got this code (working perfectly fine):
<>
<div className={"h-screen py-0 py-20 text-center bg-blue-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<img
src={"/image.jpg"}
alt={"Some image description"}
/>
</div>
</div>
</div>
</>
Then, replacing the img tag by an Image component breaks the responsiveness: the image never becomes smaller. It keeps its size.
<>
<div className={"h-screen py-0 py-20 text-center bg-green-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<Image
src={"/image.jpg"}
alt={"Some image description"}
width={1103}
height={628}
/>
</div>
</div>
</div>
</>
You can see what's happening on this Sandbox. I'm looking for a way that enable me to control precisely how the Image component would be positioned.

Answer 1

The problem is not in the Image component. It's related to the styles applied to the div container.
If you remove items-center from the classes in lines 18-22 you will see that the image is resizing:
<div className={"flex flex-col items-center justify-center ...}>
Change to:
<div className={"flex flex-col justify-center ...}>