next/image not showing the whole image on IOS

[westernal]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 17.6.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.15
      eslint-config-next: 13.1.6
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue

GitHub: https://github.com/westernal/Portfolio Website: https://alinavidi.dev/

To Reproduce

Click on burger menu and go to projects.

The code <Image src={project.image.website} width={300} height={150} id="project-image" alt={"Westernal's website"} />

Test on Windows

Actual result on IOS

The image

Describe the Bug

I'm using Next.js to build my portfolio but there is a problem, when I tested it on chrome with my laptop everything is perfect but when I deployed it the image was broken. I tried fill option and object-fit but nothing worked.

I've never had this issue before with next/images. I'll be happy if you help me understand what happened.

Expected Behavior

Showing the whole image as the docs says:

The default image fit behavior will stretch the image to fit the container.

but its not stretching.

Which browser are you using? (if relevant)

Safari and Chrome on IOS 16.3.1

How are you deploying your application? (if relevant)

Vercel

[heyitsuzair]

Try using css property "object-fit:cover"

[westernal]

Try using css property "object-fit:cover"

I did and it didn't work.

[westernal]

I just saw this issue's text on IOS and saw this:

I think the problem is with the image itself.

[syeddanial110]

This issue is solved when I add width <Image src={logo} alt="logo" height={200} width={200}