Open nicitaacom opened 11 months ago
Just add this, depending on what you need
style={{ width: "300px", height: "32px" }}
or
style={{ width: "auto", height: "auto" }}
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?
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
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)
Is any updates about this issue?
This issue still open - somebody know how to fix this?
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.
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"
/>
@CitizenBeta It is strange you have the as
prop in your template. Is Image
from next/image
?
Hey I updated MVP Please check it and help if you want Because I'm still see this issue
@CitizenBeta It is strange you have the
as
prop in your template. IsImage
fromnext/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!
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!
Yeah this is still an issue. I set both properties, follow the directions, and still randomly get this warning.
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.
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
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.
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!
Work for me, thanks!
Provide mvp please
Can confirm this warning is unfixable. It is a bug.
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;
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
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
I keep seeing comments suggesting fixes and possible solution, can we all agree that:
Same with next.js Image warning here
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 as
value and it is preloaded intentionally.
Never had this issue before with NextJS must be some sore of bug.
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.
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
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.
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.
for me was
<div className="w-[114px] h-[91px]">
<Image
alt={productName}
width={114}
height={91}
src={image}
/>
</div>
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
I want to point out this
I already included w-auto h-auto
but warning persists
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>
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
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
Provide environment information
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.