Next.js Image Warning: Width or Height Overridden by CSS Causes Aspect Ratio Warning

Bug report

When rendering the <Client /> component, the browser console logs a warning from Next.js' <Image> component:

Image with src "/images/logos/walmart.svg" 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.

This warning appears even when valid width/height values are provided, and it indicates that the <Image> component's internal aspect-ratio validation is being triggered unexpectedly.

The issue occurs when only one dimension (width or height) is customized via CSS, and the component attempts to infer the other dimension automatically.

Current Behavior

When rendering the Client component, the browser console shows the following warning: Image with src "/images/logos/walmart.svg" 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.

Expected behavior

The component should maintain a correct aspect ratio even when the user provides only width or only height.

Next.js should not emit warnings about incorrect image resizing.

If only one dimension is overridden via CSS, the component should automatically apply width: auto or height: auto to keep the image proportional.

Console warnings should be eliminated for clean debugging.

Reproducible example

Suggested solution(s)

Additional context

Your environment

Software	Version(s)
Formik	2.4.5
React	18.2.0
TypeScript	5.3.3
Browser	Chrome 121
npm/Yarn	npm 10.2.4
Operating System