Image warning issue - 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
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
demo - https://ominous-space-broccoli-9qgwx9pqq6p2pxvq-3000.app.github.dev/
mvp - https://ominous-space-broccoli-9qgwx9pqq6p2pxvq.github.dev/
mvp codesandbox - https://codesandbox.io/p/devbox/mvp-warn-img-aspect-ratio-md683h
github - https://github.com/nicitaacom/acc2-image-warning-to-maintain-the-aspect-ratio
To Reproduce
- Paste this code in page.tsx
<Image
className="cursor-pointer max-h-[32px] w-auto h-auto"
src={"/23_store-dark.png"}
alt="logo"
width={300}
height={32}
priority
/>
See this
I already use width auto and height auto
Current vs. Expected behavior
I don't want to see useless warnings in my console
Now I see useless warning that impossible to fix (I tried add some tailwind classes - issue persists)
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Binaries:
Node: 16.17.0
npm: 8.15.0
Yarn: 1.22.19
pnpm: 7.1.0
Relevant Packages:
next: 13.5.1
eslint-config-next: 13.5.1
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Image optimization (next/image, next/legacy/image)
Additional context
I tried it with next 13.5.3 - the same result
For search engines
Image with src "/success-checkmark.gif" 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the page.tsx reproduction and the linked demo or CodeSandbox, then inspect the next/image behavior behind the browser-console warning. Verify the result against the reported CSS classes and latest canary; done means valid width/height CSS usage no longer produces an incorrect warning while genuine aspect-ratio risks remain reported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100