objectFit cover stretches the image when image width is more than height in React easy crop

[FunsaiSushi]

I am using react-easy-crop to crop, zoom an image in my next js app. The image is stretched and cropped to fit the width of the cropper when it's a wide image (width > height) but works perfectly for tall images (height > width), doesn't get stretched nor cropped, dragging I can select the part that I want of the image. Also the crop actually works for wide images as well, it's just the preview that isn't displaying properly

Here's my code snippet -
<div className={relative w-full aspect-square rounded-2xl overflow-hidden} > {profilePicUrl && ( <Cropper image={profilePicUrl} crop={crop} zoom={zoom} aspect={1} cropShape="round" showGrid={false} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={onProfileCropComplete} // objectFit={!wideImage ? "cover" : "contain"} objectFit="cover" style={{ mediaStyle: { height: wideImage ? "100%" : "fit-content", width: "fit-content", objectFit: "cover", }, cropAreaStyle: { border: "none", }, }} /> )} </div>
One roundabout solution I tried is to conditionally set the objectFit attribute as the wide image doesn't get stretched if contained but then the crop area becomes smaller than the parent as shown in the image. And if I specify the mediaStyle then the wide image gets cropped as shown in the image.

I'm trying to achieve the same functionality for wide images as tall images.

[ValentinH]

I'm not sure what the issue is but you shouldn't overwrite the media styles like this as the library is setting the same attributes as the ones you're setting in your example.

[FunsaiSushi]

Kindly see the image that I've included. First I tried without the styles and the wide image got stretched to fit the crop area. Later I included the mediaStyle, which does get rid of the stretch but the image gets cut off (2nd image in the bottom row, I dragged the image right a bit and as you can see it's dark at the left).

For the tall images this doesn't happen. The image doesn't get stretched (i.e. squished) to fit the crop area, nor does it get cut off (I dragged the image down a bit so you can see the top of the image, there's some text there (4th image in the bottom row)).