How to change height of NextJS Image tag according to screen width?

Issue

I am using next/image to render my image like this:

<Image 
 src={imageLink} 
 width="1920" 
 height="512" 
 alt="Hero Image" 
/>

This is fine for screen widths above 750px.

How to update the height to "612" when the user visits on mobile or tablet (below 750px screen width)?

Solution

Put Image inside div and put the following props on the Image:

<div className="div-class">
   <Image src={imageLink} layout="fill" objectFit="cover" />
</div>

The div in this example needs to have position: relative. Now you will be able to give this div any height/width you need with media queries

Answered By - anolan23