Configure cropper with a fixed crop area size

[Biser Z]

First, thank you for the amazing library - your work is much much appreciated!!

Spent countless hours trying to configure the cropper so that the crop area has exactly the same size, regardless of the size of the media. My users upload images with different aspect ratios on mobile and my goal is to allow them to crop their media to a fixed ratio.

I would like the crop area to always take the width of the window so that no matter the uploaded media, the crop area always has the same size. However, it appears that for me the crop area gets adjusted depending on the original image and ergo it changes depending on the uploaded media:

Instead of that, I want the crop area to always expand to the width of the window no matter the format and aspect ratio of the media so that it doesn't push down the content underneath.

I tried different combinations of objectFit and height container styles and I came to the conclusion that:

• for "wide" images I need to be using objectFit="vertical-cover";
• for "tall" images I need to be using objectFit="horizontal-cover".

Which gets me close to what I need but for "wide" images it squashes them:

This is the setting I have where COVER represents the logic described above:

            <Cropper
               image={props.imageUrl}
               crop={crop}
               zoom={zoom}
               cropShape="rect"
               aspect={4/5}
               objectFit={COVER}
               onCropChange={setCrop}
               onCropComplete={props.onCropComplete}
               onZoomChange={setZoom}
                style={{
                  containerStyle: {
                      height: "500px",
                      position: "relative",
                      margin: "auto"
                    },
                }}
             />

Any help will be much appreciated!

[Valentin Hervieu]

Thanks for the detailed issue.

The first thing that I can say is that I don't recommend changing the style of the container. Instead you should have a parent div that is responsible for setting the right width and height.

Then, regarding the objectFit, I feel like your issue is related to what we are currently discussing in #466.

Last but not least, it would be much easier for me to help if you could share a codesandbox showing what you are trying to do.

[Biser Z]

Appreciate your comment @ValentinH - I do believe my issue is actually what the fit type is supposed to solve.

It's a little hacky but I managed to get it working without the new type by doing the following:

• use objectFit="vertical-cover" for wide and objectFit="horizontal-cover" for tall images (that part sucks coz it requires logic to determine the image orientation);
• limit the height of the container so it doesn't expand proportionally to the source image (either through containerStyle or wtv);
• the img element .reactEasyCrop_Image appears to have a max-width: 100% - that is what's crushing the image as I showed above - once you override it, it works as expected.

With these changes, I was able to get it to work as required:

Would still prefer to have a solution out of the box.

[Valentin Hervieu]

Good news for the fit objectFit option, you will also benefit from the new cover option when we manage to land it.

The 2 last changes don't look expected to me, that's why I'm wondering if they are due to overriding the container style.

[Valentin Hervieu]

@biserz could you please try the new option available in the sandbox of this comment; #466 (comment)

You can install the package locally by using the version mentioned in the sandbox package.json.

[Biser Z]

Yes. I'll try it out and report back. Merci

[Biser Z]

@ValentinH yes, that does solve the issue I was having! Will migrate my functionality asap.

Thank you so much for taking the time to review my problem, your overall responsiveness with everyone, and last but not least - the awesome library! Thank you