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]

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

[RyanPaiva56]

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

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

[artgustavobarros]

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.

[artgustavobarros]

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

[artgustavobarros]

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>

[cssinate]

I'd like to argue that this warning shouldn't show up if there's an aspect-ratio CSS property. It's valid to have width: 300px; aspect-ratio: 3/1;.

[singhkaram]

w-auto h-auto aspect-auto max-h-[369.78px] max-w-[208px] min-w-[208px] min-h-[369.78px]
try this way

[ko-devHong]

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!

this is my setting

@layer base {
    img {
        max-width: 100%;
        height: auto;
        width: auto;
        aspect-ratio: auto;
    }
}

NOTE : If the error persists after changing this setting, check if there is a percentage value in width or height

[VoytekMich]

priority

priority and style={{ width: ${size}px, height: ${size}px }} solves problem

[nicitaacom]

priority

priority and style={{ width: ${size}px, height: ${size}px }} solves problem

Tell me more about where you get this size from?
I mean how do you identify sizes?

[xzedx]

@layer base {
  img {
    max-width: none;
  }
}

only with this can get rid of the warning when using tailwindcss

[cap340]

As suggested by @xzedx, in my case it works by adding max-w-none with "tailwindcss": "3.4.14"

<Image
    src="......"
    alt="......"
    width={308}
    height={384}
    className="h-full w-auto max-w-none object-cover"
/>

[carlosromanxyz]

This works for me using Tailwind (I need figure tag to wrap image)

<figure className="relative w-full lg:h-[600px]">
  <Image
    src={image}
    alt={`Slide image alt text`}
    className="object-cover w-full h-full"
    width={1920}
    height={1080}
    style={{ width: 1920, height: 1080 }}
    priority
  />
</figure>

Le edit: You can use this, too:

style={{ width: '100%', height: 1080 }}

Le second edit: Based on this answer, you can try this:

<figure className={'relative w-full h-[250px] lg:h-[600px] before:content-[""] before:absolute before:bg-gradient-to-br before:from-yellow-700 before:to-red-700 before:top-0 before:left-0 before:right-0 before:bottom-0 before:mix-blend-multiply'}>
  <Image
    src={slide.image}
    alt={`Imagen del slide`}
    className="object-cover w-full h-full"
    width={0}
    height={0}
    sizes={'100vw'}
    priority
  />
</figure>

Yes, I can use another AspectRatio from certain component libraries, because I'm using a 16:9 picture, but my component is in the another way

(Excuse my english)

[shivakantshukla55]

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.

This worked for me but this affected size of the other images on my site.

When I tried inline style style = {{width: "auto", height: "auto"}} this also removes the warning but offcourse size of the image is not fixed as I want.