How to get bleed for square images when using aspect ratio?

[keepitrio]

When I set aspect={1}, if I use a non-square image, i can see the bleed (rest of the image being cropped out). But if I use a square image, that area is not available to me. See here: https://codesandbox.io/s/react-easy-crop-in-ts-forked-orh5so?file=/src/App.tsx You can switch line 26 to be from image={SQUARE_IMAGE} to image={NON_SQUARE_IMAGE}

I would like to have a container for the cropper which still shows more of the bleed image, but if I set a width and height to the container, it no longer shows the bleed. (uncomment line 15 and 16 in style sheet to see this)

Is there a solution for this?

[keepitrio]

I've read the threads about using cropSize not being recommended, but I'm wondering if there's a way to achieve something like this: The crop size always remains the same (for example, 400px by 400px), but no matter what image you use, the image is always flush to the edges of the cropper box.

Right now if I set cropSize={{ width: 400, height: 400}} and upload a square or near square image, the entirety of the image does not show in the cropper.

[ValentinH]

OK I better understand. I'm playing with your example to see if I can get something that would fit what you are looking for.
BTW in your original message, you wrote "(uncomment line 15 and 16 in style sheet to see this)" but I don't see anything commented on those lines. Did you save your sandbox?

[keepitrio]

Thank you!! NOPE forgot to save, just added it back and saved!

[ValentinH]

Unfortunately, I couldn't find something fitting your needs.
I think we would need to add an option like padding that would add some spacing around the image inside the main container. However, I'm not really sure if this is something straightforward to do based on the way images are currently positioned in the cropper...

[keepitrio]

that makes sense. Thank you so much for looking into this, image handling is very complex!

[ValentinH]

Yes indeed 🙈