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

• [X] 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.

[CitizenBeta]

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

[CitizenBeta]

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

Removing that solved it for me. I honestly don't know how that got there, maybe it was in a code sample. Thank you!

[nicitaacom]

Any updates on this? I'm still see this issue

I write this comment to keep this issue open

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[mcfry]

Yeah this is still an issue. I set both properties, follow the directions, and still randomly get this warning.

[Jungho-Cheon]

Hello. In the face of the same problem, I made several estimates, and in my project, it was a symptom due to the default setting of tailwindcss. If you are using tailwindcss, you can resolve warning with the following settings.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    img {
        width: auto;
        height: auto;
    }
}

If you are not using tailwindcss, it would be good to check if there is a css file that modifies width, height of img tag with the same principle.

[nicitaacom]

Before suggested fix:

After suggested fix: (console has been cleared and page has been refreshed)

MVP - https://codesandbox.io/p/devbox/mvp-warn-img-aspect-ratio-md683h

@Jungho-Cheon - please provide mvp where fix work for you So others can use your fix

[tjx666]

This issue is because the tailwind base css:

@tailwind base;
@tailwind components;
@tailwind utilities;

which include following:

img, video {
    max-width: 100%;
    height: auto;
}

I don't know how to property fix it, but this warning seems not cause any actual issue.

[nalfin]

Hello. In the face of the same problem, I made several estimates, and in my project, it was a symptom due to the default setting of tailwindcss. If you are using tailwindcss, you can resolve warning with the following settings.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    img {
        width: auto;
        height: auto;
    }
}

If you are not using tailwindcss, it would be good to check if there is a css file that modifies width, height of img tag with the same principle.

Work for me, thanks!

[nicitaacom]

Work for me, thanks!

Provide mvp please

[poznianski]

Can confirm this warning is unfixable. It is a bug.

[alok-38]

import Image from "next/image";
import Link from "next/link";

const Footer = () => {
  return (
    <footer className="border-t">
      <div className="flex-center wrapper flex-between flex flex-col gap-4 p-5 text-center sm:flex-row">
        <Link href="/">
          <div>
            <Image
              src="/assets/images/logo.svg"
              alt="logo"
              style={{ width: "128px", height: "38px" }}
              priority
              width={128}
              height={38}
            />
          </div>
        </Link>

        <p>2024 Evently. All Rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;

[nicitaacom]

import Image from "next/image";
import Link from "next/link";

const Footer = () => {
  return (
    <footer className="border-t">
      <div className="flex-center wrapper flex-between flex flex-col gap-4 p-5 text-center sm:flex-row">
        <Link href="/">
          <div>
            <Image
              src="/assets/images/logo.svg"
              alt="logo"
              style={{ width: "128px", height: "38px" }}
              priority
              width={128}
              height={38}
            />
          </div>
        </Link>

        <p>2024 Evently. All Rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;

I need max width that fit original aspect ratio e.g 200x100 h-[50px] w-full Then should be image 100x50

[lorenzo-dallamuta]

I keep seeing comments suggesting fixes and possible solution, can we all agree that:

1) if styled properly (see screenshot below for inspiration) the images display fine with one side having a fixed length and the other one adapting according to the original aspect ratio 2) the warning is going to appear in the browser console, regardless of the image displaying properly

[nicitaacom]

I keep seeing comments suggesting fixes and possible solution, can we all agree that:

Same with next.js Image warning here

[byron-rod]

I was able to fix the error with the globals.css option: @layer base { img { width: auto; height: auto; } }

But after that i got a new error:

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Never had this issue before with NextJS must be some sore of bug.

[th3gust]

To solve this problem, I used the tip to add @layer base { img { width: auto; height: auto; } } in globals.css, and for every image, I wrapped it in a div and applied all the CSS options to that div.

[nicitaacom]

To solve this problem, I used the tip to add @layer base { img { width: auto; height: auto...

Please add a little bit of code that demomstrated how NOT to do and and HOW to do

[tommhuth]

I have the same problem, using Tailwind.

No amount of extra @layer base { img { width: auto; height: auto; } }, inline styles or explicitly adding w-auto h-8 (in my case for a list of logos) help. Also the images are perfectly fine, not distorted and reserving space as needed. Would be interesting know more about why Next chose the width/height route, instead of using aspect-ratio to reserve space.

[Jordaneisenburger]

The only thing that worked for me is to actually set a style like so:

<Image
    alt={productName}
    width={114}
    height={91}
    style={{ width: '114px', height: '91px' }}
    src={image}
/>

the tailwind @layer does nothing for me.

[th3gust]

for me was

<div className="w-[114px] h-[91px]">
  <Image
      alt={productName}
      width={114}
      height={91}
      src={image}
  />
</div>

[ka1eka]

this works as well:

<Image
  src="/vercel.svg"
  alt="Vercel Logo"
  className="h-[24px]"
  width={100}
  height={24}
  priority
/>

because "h-[24px]" overrides

img {
  height: auto;
}

which comes from tailwind base

[nicitaacom]

I want to point out this

I already included w-auto h-auto but warning persists

[th3gust]

dont change or add any @layer to tailwind global css, just add a div as parent of next/image and add the height and weight values on this div, like i showed above

for me was

<div className="w-[114px] h-[91px]">
  <Image
      alt={productName}
      width={114}
      height={91}
      src={image}
  />
</div>