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

Question

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)?

Epiphora

Answer 1

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

Quito

Answer 2

In 2023 and with NextJS 13, the Image-API has changed. Working with the new app directory and new naming-convention of NextJS 13, this is what I did to accomplish requested behavior:

// page.jsx

import styles from './page.module.css';
import logo from '../public/logo.png';

export default function Home() {
  return (
    <div className={styles.logoContainer}>
      <Image src={logo} alt='Argo Logo' fill />
    </div>
  );
}

/* page.module.css */

.logoContainer {
  position: relative;
  overflow: hidden;
  width: 158.57px;
  height: 30.93px;
}

@media (max-width: 500px) and (orientation: portrait) {
  .logoContainer {
    width: 79.285px;
    height: 15.465px;
  }
}

Case

Answer 3

put your Image inside div like this and you can change height and width now

 <div className='relative h-96 md:h-3/4'>
     <Image className='h-full sm:h-64' 
         src="/static/images/desktop/image-header.jpg" alt="sun" 
         layout='fill' objectFit='cover' width={400} height={350} />
 </div>

Savannasavannah

Answer 4

In the latest Next.js, you can use responsive size for images. Example is given below:

<Image
    fill
    src="/example.png"
    sizes="(max-width: 768px) 100vw,  1920px"
  />

Note: sizes will change the width of the image. For changing the height of the image wrap the image inside of a div and use CSS to change the height of the parent division.

For documentation: https://nextjs.org/docs/pages/api-reference/components/image#sizes

France

Answer 5

You create a css class (in your custom.css or anywhere)

Then you define props you need (height, styling etc)

@media (min-width: 576px) {
  .custom_class {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .custom_class {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .custom_class {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .custom_class {
    max-width: 1140px;
  }
}

Stumble

Answer 6

Use Grid tag as a parent while using Image TAG. See Example below

 <Grid width={30}>
       <Image
         onClick={() => setIsDrawerOpen(true)}
         layout="responsive"
         src={menuIcon}
         component="img"
         alt="Whatsapp logo">
         </Image>
 </Grid>

Fuhrman