fix: replace objectFit: 'auto-cover' by 'cover' with adjusted logic

[kruchkou]

Release notes

the objectFit auto-cover option was removed and replaced by cover. While doing so, the logic detecting the right value to choose between horizontal and vertical was rewritten from scratch. The algorithm is now much better at picking the right choice.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ecc084a:

Sandbox	Source
react-easy-crop	Configuration
react-easy-crop (forked)	PR

[kruchkou]

Hi, @ValentinH!

Any chance that functionality could be added?
Best regards

[ValentinH]

Thanks for this PR. Before merging, I need to take a bit of time to understand why we need so many options. I'm wondering if this new behavior should not be what auto-cover was supposed to be doing in the first place 😁
By reading the description, I think that fill would be more explicit than fit though. I'll play with the examples tomorrow.

[kruchkou]

Thanks for the answer!

I'm wondering if this new behavior should not be what auto-cover was supposed to be doing in the first place 😁

I was thinking the same as that's how the default object-fit: cover works 😁

Agree on 'fill', just want to note that 'object-fit: fill' usually stretches the image
Let me know if you would like to see any changes

[kruchkou]

One more note here:
I've just checked that 'auto-cover' actually looks the same as contain

It could make sense to mark auto-cover as deprecated and name the new option just 'cover'

[ValentinH]

@kruchkou I understand why I said that what you are looking for is what auto-cover is supposed to be doing: just checking if the image is wide or tall isn't enough: we also need to take the container aspect into account.
If you check this sandbox that is comparing both auto-cover and the new fit object-fit on each combination of tall/wide images and tall/wide containers, we can see that each time only one of them is correct.

Therefore, I don't think we need a new option. Instead, we need to also take the container aspect into account when picking between vertical-cover and horizontal-cover. What do you think?

If we manage to have this work, I would just name this option cover to align with the standard CSS option.

[kruchkou]

@ValentinH
Now I see your point. That is not related to my particular case (square container, square crop area), but related to the other ones.

Therefore, I don't think we need a new option. Instead, we need to also take the container aspect into account when picking between vertical-cover and horizontal-cover.

I assume that comparing the container aspect and the picture aspect could help to determine the proper image size and alignment.

[ValentinH]

The decision should be like this from what I could observe:

• if the image is square, then the fit logic is better
• else if the image aspect is similar to the container one (horizontal/horizontal or vertical/vertical), then the auto-cover logic is better
• else, the fit logic is better

Therefore, I would implement the above logic as part of a new coveroption, remove the auto-cover and bump a major version.

[ValentinH]

@kruchkou I managed to find a simple rule to pick between horizontal and vertical cover:

mediaAspect < containerAspect ? 'horizontal-cover' : 'vertical-cover'

I updated the PR to rename auto-cover to cover. If the logic fits your need, I'll merge this and bump a major release.

Demo: https://codesandbox.io/s/react-easy-crop-forked-d93p44?file=/src/index.js

[kruchkou]

Hello @ValentinH!

That is exactly what I was needed, thanks for the changes!

[github-actions]

🚀 PR was released in v5.0.0 🚀