In an attempt to create a section with text on one side and a responsive image on the other, I encountered an issue. When using a basic
<img src="/myimage.extension" alt="describe my image" />To illustrate, here is the code for a hero section with a responsive image that works well:
<>
<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>
</>
However, the moment the img tag is replaced by the Image component, the responsiveness breaks down – the image remains static in 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 view the issue in action on this sandbox. I am seeking a solution that allows for precise control over the positioning of the Image component.