Dragging cannot make the image fully inside the cropping box. about react-easy-crop HOT 8 OPEN

Did you change any CSS to reach this result?

from react-easy-crop.

Did you change any CSS to reach this result?

The way I use this component:

                <Cropper
                    image={props.mediaUrl}
                    crop={crop}
                    zoom={zoom}
                    aspect={1 / 1}
                    onCropChange={setCrop}
                    onCropComplete={onCropComplete}
                    onZoomChange={setZoom}
                    minZoom={1}
                    objectFit='horizontal-cover'
                    style={{
                        containerStyle: {
                            position: 'relative',
                            width: '100%',
                            height: '100%',
                            overflow: 'hidden',
                            borderRadius: '0rem 0rem 1rem 1rem'
                        },
                        mediaStyle: {
                            height: '100%',
                            width: 'auto',
                            maxWidth: 'unset'
                        }
                    }}
                />

Plus custom CSS:

.reactEasyCrop_CropArea {
    width: 100% !important;
    height: 100% !important;
}

I think they are all css changes that I made.

from react-easy-crop.

Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.

What are you trying to achieve? Why using these overrides?

from react-easy-crop.

Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.

What are you trying to achieve? Why using these overrides?

Simply put, it is the exact effect at Instagram.
If you open Instagram and try to create a new post, upload an image large enough, you will see it.

I want the image to be displayed taking the full height of the container, which may lead to its width overflowing, and the overflowing parts are hidden, but they can be reached by dragging to the left or right.

Now the bold part above is not achieveable.

I think it should be doable, because the lib knows the container's border and that of the image, so it just needs to calculate the value for translation to make them overlapped.

Now the max limit in my case is translating by 98px, which leads to the narrow strip.
If I change it to 130px-ish in Dev Tool manually, then the effect is correct.

from react-easy-crop.

Yes so this is expected. The internal logic doesn't know anything about the style overrides so the positioning doesn't match anymore.

What are you trying to achieve? Why using these overrides?

If I zoom in the image (make it bigger), the problem gets worse, and I can reach a even smaller portion of the image.

from react-easy-crop.

Have you tried using the vertical-cover value for objectFit?

from react-easy-crop.

Have you tried using the vertical-cover value for objectFit?

Ah... It is my fault..

It should be vertical-cover in the first place... because I want the image to take the full height, which is vertically fill the cropper as the doc says...

I tried the wrong one (horizontal), then used the CSS

mediaStyle: {
    height: '100%',
    width: 'auto',
    ...
}

to make it look like it worked, but caused some internal conflicts which lead to the issue.

Sorry about taking your time!

from react-easy-crop.

No worries, I'm here to help 🙂

from react-easy-crop.