From Next.js 13, the next/image component allows styling the underlying image directly using style/className. This means you can apply width: 100% and height: auto on the Image component directly.

import Image from 'next/image';

<Image
    src={img1}
    width="0"
    height="0"
    sizes="100vw"
    style={{ width: '100%', height: 'auto' }}
/>

Or, if using Tailwind CSS.

import Image from 'next/image';

<Image
    src={img1}
    width="0"
    height="0"
    sizes="100vw"
    className="w-full h-auto"
/>

Before Next.js 13, the above feature is only available through next/future/image, and from version 12.2, next/future/image was still experimental and can be enabled in next.config.js under the experimental flag.

module.exports = {
    experimental: {
        images: {
            allowFutureImage: true
        }
    },
    // Other configs
}

For those who are getting the error like:

 Image with src "image path" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

Setting width and height attribute to 0 and adding style with your desired height or width and setting either of width or height to auto will fix the issue

             <Image
                src="image path"
                height={0}
                width={0}
                style={{width:'120px', height: "auto" }}
              />

As Next.js has mentioned in their documentation, width and height properties are required in order to avoid layout shift, using layout="fill" will only fill the container height and width that is previously set. This basically means that in order to maintain the aspect ratio, you have to know the image height and width in advance.

Luckily though, Next.js also provided us a work around with this problem with an event called onLoadingComplete, which gives us an event parameter that contains both image natural height and width.

<Image
   layout="fill"
   src="/cat.jpg"
   onLoadingComplete={e => console.log(e)} // {naturalHeight: ..., naturalWidth: ...}
/>

There are plenty of options that you can do to maintain image aspect ratio with this information, like useState to set the height and the width of the element or make the image responsive, depends on your need. In any case, hope this was helpful.

I found my own solution, I just write the same width and height as it was when I saw that warning, and added style with auto to width and height :

            <Image
              alt="logo"
              src="/logo.png"
              width={110}
              height={65}
              style={{ width: "auto", height: "auto" }}
            />

Update: In current Next.js v14, width and height accepts only number | undefined type,

<Image
  src={img}
  alt={imgName}
  className="md:w-24 w-20 h-auto" // Using tailwindcss
  width={0}
  height={0}
/>

Use className, if you are using tailwindcss / other css modules otherwise use style property.

if you're using tailwind, this worked for me:

import Image from "next/image";
<Image
      src={someImg}
      width="75" //set a width or height
      alt="img"
      className="h-auto" // add h-auto (if you've set width)
    />

I have found a solution without using next/future/image and with using css with width-[100%] on the parent div like so.

           <div
              className="mx-auto w-[100%] md:bg-card md:w-[720px] max-w-4/5"
              key={img.imageProps.src}
            >
              <Image
                placeholder="blur"
                {...img.imageProps}
                layout={'responsive'}
                alt={`${chapterData.chapterNumber} image`}
              />
            </div>

{...img.imageProps} is a object that looks like this that has original height and width.

export type ImageProps = {
  blurDataURL: string;
  src: string;
  height: number;
  width: number;
  type?: string | undefined;
};

You can get these image props using something like plaiceholder, it comes loaded with blurImage data url.

const convertImages = async (image: string) => {
    const { base64, img } = await getPlaiceholder(image, { size: 14 });
    return {
      imageProps: {
        ...img,
        blurDataURL: base64,
      },
    };
  };

OR

You can create your own function to get the height and width for each image individually before displaying it, which is required by the next <Image/> Hope this helps.

I don't think setting the height and width to 0 would be a good idea, I used the answer commented by @Lawrence Macharia and set the width and height property of style object same as what I passed to Nextjs Image component:

<Image src={imageSrc} width={400} height={600} alt={t.title}  style={{ height: 600, width: 400 }}/>

SIMPLE

1. Look at the file, the width and height, mainly in svg file property and force the size, adjusting the object-fit and if necessary the aspect-ratio logic. SVG's dimension props

2. Look at father component display's logic, mainly if you use flex. Pay attention to the computed dimension at elements inspetion of DevTools and force width and height to that. Computed dimension at devtools

You can try to set width and height with "%" way..

<Image src={image.url} alt={image.title} width="100%" height="100%" layout="responsive" objectFit="contain"/>

or you can set the width with the "vw" property like this..

<Image src={image.url} alt={image.title} width="100vw" height="100%" layout="responsive" objectFit="contain"/>