AspectRatio is forcing its img, video children to behave objectFit="cover"

[tomchentw]

Description

When I set <Image objectFit="contain" />, I expect it to happen. But if I render it inside an <AspectRatio />, it will always be objectFit="cover".

<AspectRatio ratio={3 / 1}>
  <Image
    src="https://bit.ly/naruto-sage"
    alt="naruto"
    objectFit="contain" // Does NOT work
  />
</AspectRatio>

Link to Reproduction

https://codesandbox.io/s/awesome-ritchie-ec8n9?file=/src/index.js

Steps to reproduce

1. Go to https://codesandbox.io/s/awesome-ritchie-ec8n9?file=/src/index.js
2. You should see the "Actual" and the "Expected" section

Chakra UI Version

1.6.4

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Source:
https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%401.6.4/packages/layout/src/aspect-ratio.tsx#L62-L64

Tracing it back, these lines were first introduced in this commit: c91fdf3#diff-ce7500ee881128fd4e892b90abbccad46958754956da612389d3d5e4f75ebec8

---

In my opinion, the objectFit of its img, video children should be configurable directly on its children, not on the <AspectRatio /> itself.

[tomchentw]

Since @segunadebayo authored the commit c91fdf3#diff-ce7500ee881128fd4e892b90abbccad46958754956da612389d3d5e4f75ebec8
I'm wondering what's the rational behind this? Are we okay to have a breaking change that removes this behavior? Thank you.

[segunadebayo]

This might have been an assumption around the possible use-cases of the aspect-ratio component. This was added to ensure that images stretch to fill the aspect ratio container's space.

At the moment, we're not able to change this as it'll be considered a breaking change. Removing it is not technically the solution here, but exposing a prop that determines whether to stretch the child is the solution.

As a workaround, feel free to use the workaround or pass objectFit: contain !important to the Image component.

Thanks for understanding.