Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

objectFit="cover" prevents to zoom out #566

Open
mightym opened this issue Sep 24, 2024 · 4 comments
Open

objectFit="cover" prevents to zoom out #566

mightym opened this issue Sep 24, 2024 · 4 comments

Comments

@mightym
Copy link

mightym commented Sep 24, 2024

Describe the bug
When I use objectFit="cover" together with aspect={1} cropShape="round" I can't zoom the image to fit the crop area. The crop area is always smaller than the possible max crop area available:

In that screenshot my image is a square image. And you can see that there is still a lot of space left to zoom in. But you can't:

1

To Reproduce
Steps to reproduce the behavior:

  1. Open the example below
  2. Upload a small square image

Expected behavior
I expect to zoom in on the image so that it fully covers the crop area.

@ValentinH
Copy link
Owner

Do you expect to zoom in or out? The thing is that zooming out would lead to empty spaces at the top and bottom of the image..the library prevents that by default.
However, you can set restrictPosition to false to disable this.

@mightym
Copy link
Author

mightym commented Sep 24, 2024

I leave you my sample image here. Also try to make your browser window smaller and larger.
Both zoom direction have in the example screenshot above enough space.

10

Will try to prepare a screen capture video for you.

@mightym
Copy link
Author

mightym commented Sep 24, 2024

This is after I selected the image:

video.mov

@ValentinH
Copy link
Owner

ValentinH commented Sep 26, 2024

The thing is that zoom: 1 means that the image covers its container. If your cropped area is squared then it's better to have the container to be a square as well.

See this quick example: https://codesandbox.io/p/sandbox/react-easy-crop-custom-image-demo-forked-cghhr6

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants