Next.js Discord

Discord Forum

Simple but stupid Image error

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
I get error:
Image with src "/wonderland-logo.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.

And this is my code:
        <motion.div
            animate={{
              filter: active && !toggled ? 'invert(100%)' : 'invert(0)',
            }}
            className="h-12 w-full z-50"
          >
            <Image
              src="/wonderland-logo.png"
              alt="Wonderland logo"
              height={48}
              width={152.33}
              priority
              style={{ height: '100%', width: 'auto' }}
            />
          </motion.div>
Answered by Rhinelander
Fixed problem by rounding up the width to 153
View full answer

1 Reply

RhinelanderOP
Fixed problem by rounding up the width to 153
Answer