cssreactjsnext.jsmedia-queriesnext-images

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

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