[BUG] Image component with fill and contain should set max-width and max-height, not width and height

[Baribj]

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 N
    Binaries:
      Node: 16.17.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.9
      eslint-config-next: 13.4.9
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

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 or a replay of the bug

https://codesandbox.io/p/sandbox/nostalgic-frost-kstrfj?file=%2Fpages%2Findex.js%3A25%2C32

To Reproduce

CodeSandBox: https://codesandbox.io/p/sandbox/nostalgic-frost-kstrfj?file=%2Fpages%2Findex.js%3A14%2C8-29%2C13

Live: https://kstrfj-3000.csb.app/

<div
  style={{
    width: "100px",
    height: "100px",
    position: "relative",
  }}
>
  <Image
    src="https://res.cloudinary.com/jerrick/image/upload/v1682412853/6447953565c86d001de9aa14.jpg"
    fill
    style={{
      objectFit: "contain",
      borderRadius: "15px",
    }}
  />
</div>

Describe the Bug

When using fill, next enforces width: 100% and height: 100%, trying to change those via the style prop will result in an error indicating that they can't be changed.

The issue is, when width and height are set at 100%, and objectFit:"contain" is set, the <img> html tag will stretch to fill the the parent container while the image itself will be contained in that parent and not necessarly touching all edges (happens when the image has an aspect ratio that's different than the parent container).

This would then result in broken borderRadius.

Instead of setting width: 100% and height: 100%, I think next should set maxWidth: 100% and maxHeight: 100% (or at least allow us to overwrite the width and height properties) which would fix this issue.

Here are the visual differences between the two:

With width and height (notice how the img tag stretches to fill the whole container but the image it self doesn't):

With max-width and max-height + transform to center the image within the container.

Expected Behavior

There should be a way to contain an image in parent and at the same time be able to set border-radius property on the image.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Rafayurgit]

i am not able to find the file location! can anyone give me path of the file?