Next.js Discord

Discord Forum

Image doesnt resize on mobile

Answered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
Hey guys, I have this logo image where I want it to be 130 w and h if on desktop and 30 w & h if on mobile but something has gone wrong,
This is the code for it:
"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useWindowWidth } from "@react-hook/window-size";

const LogoImage = () => {


  const windowWidth = useWindowWidth();
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMobile(windowWidth <= 768);
  }, [windowWidth]);

  const [scrollOpacity, setScrollOpacity] = useState(100);

  const imageSize = isMobile ? 30 : 130;

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;

      const opacity = Math.max(20, Math.floor((500 - scrollPosition) / 10));
      setScrollOpacity(opacity);
    };
    window.addEventListener("scroll", handleScroll);
    // Clean up
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className="absolute top-0 left-0 ml-2 z-30">
      <Image
        src={"/logo.JPG"}
        width={imageSize}
        height={imageSize}
        alt="logo"
        className={`rounded-full ${
          scrollOpacity >= 20 && scrollOpacity <= 100
            ? `opacity-${scrollOpacity}`
            : "opacity-20" // Default to 20 if opacity is out of range
        } transition-opacity duration-500 ease-in fixed`}
      />
    </div>
  );
};

export default LogoImage;

Thank you in advance
Answered by Arinji
make a relative div, wrapping the image component
View full answer

65 Replies

SingapuraOP
I would basically like to have different image widths for different devices, I was trying to only make it desktop/mobile but desktop/tablet/phone would make sense. Just dont know how to do this
Okay well I just re-ran npm run dev and it works. But is there a nextjs way to have different widths for multiple devices? Like 3-4 different widths
Arinji
@Singapura don do it like this
Arinji
make a relative div, wrapping the image component
Answer
SingapuraOP
Okay
Arinji
add all of your image width and height styles to it using tailwind and your nice media queries
at this point ideally you have stuff like md:w-5 w-2 right
so hover over the md: part, vscode will show you a media query, so like this

(min-width: 1280px)
SingapuraOP
so I should not use the useWindowWidth hook?
I see a nother problem there
on mobile load, first the image is big then it gets small after 1 second
thats not good
Arinji
go to your image component, remove width and height, set fill to true
and then in the sizes start adding the media queires with the respective widths
SingapuraOP
okay, let me see
so @Arinji it worked but now I have another issue. Issue is that I needed the div to be absolute because this happens now
Doesnt look good
"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useWindowWidth } from "@react-hook/window-size";

const LogoImage = () => {
  // const imageSize = isCollapsed ? 30 : 130; // Define the image size based on collapse state

  const [scrollOpacity, setScrollOpacity] = useState(100);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;

      const opacity = Math.max(20, Math.floor((500 - scrollPosition) / 10));
      setScrollOpacity(opacity);
    };
    window.addEventListener("scroll", handleScroll);
    // Clean up
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className="relative w-[30px] h-[30px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] z-30">
      <Image
        src={"/logo.JPG"}
        alt="logo"
        fill
        className={`rounded-full ${
          scrollOpacity >= 20 && scrollOpacity <= 100
            ? `opacity-${scrollOpacity}`
            : "opacity-20" // Default to 20 if opacity is out of range
        } transition-opacity duration-500 ease-in fixed`}
      />
    </div>
  );
};

export default LogoImage;

added media queries and the sizing works now
But how to fix the new issue
Arinji
so your parent div has to be absolute right?
SingapuraOP
Yes ideally, if its absolute, it sits on top of the section
as I want it to be
Arinji
so set it to absolute :D
SingapuraOP
LMAO omg
Arinji
The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.
:D
SingapuraOP
For some reason I thought it must be relative for the image sizes. The word "relative" threw me off
Okay works now
haha
Arinji
when life gives you lemons, you make lemonade fr fr
SingapuraOP
Thank you
Arinji
no worries lol, took me a while to figure this out
mark a solution :D
SingapuraOP
Thank you man, was hitting my head against a wall
will do
Thanks again
Arinji
one sec, i dont see yor sizes stuff, make sure to add them or else it wont be performant
SingapuraOP
What sizes?
with media queries?
    <div className="absolute w-[30px] h-[30px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] z-30">

You mean these?
SingapuraOP
so this would specify the sizes on the image directly instead of the div?
Arinji
no no
nextjs dosent know what the size of the div is
so it just gives the biggest possible image
which is dumb, since on mobile your image is obviously much smaller
so with this, you tell whats the max size of your div, at certain widths
SingapuraOP
Hmm I must do this for all the images on my app then, because none of them have this
I will figure it out
I have this other issue at hand. Would you mind if I ping you when I make a new thread?
Arinji
sure :D
@Arinji make a relative div, wrapping the image component
Arinji
mark this as your answer :D
SingapuraOP
Alright
Last question here
If I set this: (max-width: 768px) 100vw
Is 100vw the viewport of the screen or the wrapping div?
Arinji
its the view width
viewport i mean
SingapuraOP
so entire screen
Arinji
yea
SingapuraOP
Alright
Thanks 🙂
@Singapura Alright
Arinji
can you mark the answer pls
Original message was deleted
Arinji
follow this if you dont know how to mark answers
SingapuraOP
Yeah I did not know how to, let me mark it.