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