How do display original size of image using next/image in Next.js14?

Question

I am trying to display images with its original size. However, I see next.js recommends to use "fill" which is chaning the size of the image and giving a bad feature of it. I finally found style:{{objectFit: "scale-down"}} that keeps the original size. However, this option is not working well on IOS.

            <Avatar sx={{ bgcolor: "transparent" }} variant="square">
              <Image
                src={setIcon}
                alt="Equipment Set Icon"
                fill
                style={{ objectFit: "contain" }}
                sizes="(max-width: 600px) 100vw"
                quality={100}
              />
            </Avatar>

            <Avatar sx={{ bgcolor: "transparent" }} variant="square">
              <Image
                src={setIcon}
                alt="Equipment Set Icon"
                fill
                style={{ objectFit: "scale-down" }}
                sizes="(max-width: 600px) 100vw"
                quality={100}
              />
            </Avatar>

The image gets very small on IOS like follow image when I use scale-down option.