Skip to content

How to make Image responsive in NextJS 13

Hi, I understand that Image component in Next/Image is annoying. Sometimes it needs width and height predefined and still we fail to get a responsive image according to our need.

Here is a fix to to make Image component responsive in Next JS 13.

All you need to do is wrap the Image Component into a <div> component and write the Image component in this way

import dummyImage from "IMAGE_PATH"
<div className='w-full max-w-xs'>
        width: '100%',
        height: 'auto',

Here are a few things to notice:

  1. I am using NextJS 13 with Tailwindcss
  2. Make sure to import your image and use the imported image (imported as dummyImage ) in the src. Avoid writing IMAGE_PATH in src attribute. I don’t know why it throws error to me while doing the opposite.
  3. To make image responsive, change the styles of wrapper <div> element. Like I have given it a max-w-xs (max-width: 20rem; /* 320px */).
  4. You can change the responsive styles of the <div> element, the Image will be resize just like the <div>.

If you face any problem, let me know.