react-easy-crop icon indicating copy to clipboard operation
react-easy-crop copied to clipboard

objectFit="cover" prevents to zoom out

Open mightym opened this issue 1 year ago • 4 comments

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.

  • Please create a CodeSandbox that demonstrates your issue. https://codesandbox.io/p/sandbox/react-easy-crop-custom-image-demo-forked-lgqh52?file=%2Fsrc%2Findex.js%3A81%2C15&workspaceId=bc8b6897-580d-458a-9b3c-d003c96a2633

mightym avatar Sep 24 '24 16:09 mightym

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.

ValentinH avatar Sep 24 '24 18:09 ValentinH

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 avatar Sep 24 '24 18:09 mightym

This is after I selected the image:

https://github.com/user-attachments/assets/be4c4aea-cdfd-4cbf-a765-93a2ff50c9af

mightym avatar Sep 24 '24 18:09 mightym

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

ValentinH avatar Sep 26 '24 07:09 ValentinH

Hi ValentinH,

I tried your solution to enable zooming out while cropping the full image, but if we try to crop the full image, there is some transparent space that also comes after the cropped image. I only want the image and don't need this extra transparent space. How to resolve this issue now?? Screenshot 2024-11-27 200854

arastu-diwan avatar Nov 27 '24 14:11 arastu-diwan

This transparent area means that your actual cropping logic (the one that takes the original image and produces the new one) should be adapted to remove this empty space. This is outside of the library.

ValentinH avatar Nov 27 '24 17:11 ValentinH