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

[nicitaacom]

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

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

[Paget96]

Just add this, depending on what you need

        style={{ width: "300px", height: "32px" }}

or
style={{ width: "auto", height: "auto" }}

[terrymun]

Having auto width and height doesn’t make sense. It’s one or the other. What’re you trying to achieve by setting both properties to auto?

[nicitaacom]

Just add this, depending on what you need

        style={{ width: "300px", height: "32px" }}

or style={{ width: "auto", height: "auto" }}

I'd like to use tailwind to keep consistent
Now I do w-auto and h-auto and it doesn't work

[nicitaacom]

Having auto width and height doesn’t make sense. It’s one or the other. What’re you trying to achieve by setting both properties to auto?

I wnat max-h-[32] and w-full

I mean image should be max-h-[32px]

If I set max-h-[32px] and in atributes width={300} my image has 300px width - I don't want it
I want image to be with original aspect ratio (I think I bad described what I want - I decided to add picture to describe what I mean)

[nicitaacom]

Is any updates about this issue?

[nicitaacom]

This issue still open - somebody know how to fix this?

[nicitaacom]

I'm still see this issue
Somebody know how to fix it?

warn-once.js:16 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.

[RyanPaiva56]

I'm running into this issue as well.

console.js:213 Image with src "/logos/test.png" 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.

With this:

<Image src={"/logos/test.png"}
       width={42.625}
       height={40}
       alt="test"
       as={NextImage}
       radius="none"
/>

And still have the issue with this:

<Image src={"/logos/test.png"}
       width={42.625}
       height={40}
       alt="test"
       as={NextImage}
       radius="none"
       className="h-[40px] w-auto"
/>

[terrymun]

@CitizenBeta It is strange you have the as prop in your template. Is Image from next/image?

[nicitaacom]

Update

Hey I updated MVP
Please check it and help if you want
Because I'm still see this issue