How to make the crop pan to always fit the height and width on the image.

[syedslegend786]

I have images with different height and width. Some images are too small and some are with large height and i have to show images in "contain" mode.
How to make the cropper pan always fit the image height and width.

I tried different aspect ratios but it does not worked.

[ValentinH]

Either you have to set the cropper aspect ratio to the same value as the image one or you should use the cover object fit.

[syedslegend786]

Either you have to set the cropper aspect ratio to the same value as the image one or you should use the cover object fit.

<div className="relative w-full aspect-square">
            <Cropper
              image={value}
              crop={crop}
              zoom={zoom}
              onCropChange={setCrop}
              onCropComplete={onCropComplete}
              onZoomChange={setZoom}
              objectFit="cover"
              showGrid={false}
            />
          </div>

This is my code but the crop pan , do not fit with the height and width of the image show inside div. Would you please help me to resolve this one.

[ValentinH]

Please provide a CodeSandbox showing your issue. It's hard to understand with just words 😅

[syedslegend786]

Please provide a CodeSandbox showing your issue. It's hard to understand with just words 😅

https://codesandbox.io/p/sandbox/stupefied-haibt-rfgm9h?file=%2Fsrc%2Findex.js%3A24%2C13

this is the case senerio, image should be object-contained, height width could be different,
require: cropping pan should always equal to the width and height of the image(image object contain)

[ValentinH]

[syedslegend786]

Ops! sorry for that.
try this one:
https://codesandbox.io/p/devbox/confident-brahmagupta-7lvd3h

[ValentinH]

If I understand correctly what you want, you should set the cropper aspect ratio to the same value as the image one.
So if the image is 1920x1000px, set the aspect prop to 1920/1000.

[ValentinH]

Closing as there was no answer for a while. Comment to re-open 😉

[teddybee]

I have similar issues, I cant set the (max) cropSize to the image's size.
The image is 1500x1100 px, but when I set the cropSize to that, the light box is much larger than the image itself.
Zoom is fixed to 1.

[ValentinH]

I really recommend using the aspect prop instead of cropSize.

[teddybee]

I tried that as well(aspect set to 15/11, container div's aspectRatio as well), not helped. Also, I need to cut the image pixel perfect.
The cropSize somewhere around 1340*970 covers the image.

[teddybee]

Do you need a sample app for reproduction?

[ValentinH]

Yes definitely, this would help

[teddybee]

I think the problem is, there is no possibility to keep the image size the same 1-1px mapping with zoom=1. The image will always squeezed. I have tried without cover param, the default is "cover".
I checked the div size of the cropper component: 1336*980

[teddybee]

I got it now, and find logically strange to use the cropSize prop relative to bounding div`s size.
It would be better if we can set it eighter in percentage of the image or pixels of the image(as the initialCroppedArea).
In a responsive UI, it is hard to maintain the same result/state(by sliders), if the div is changing.

[ValentinH]

That's why I don't like the cropSize prop and that it's discouraged to be used from the Readme. aspect is what you are looking for and is meant to be used on responsive UIs.

The pixels size shouldn't matter in the crop UI: it only matters when actually cropping the image to produce the new image.

[syedslegend786]

I came to handle cropSize in this way:

1. if you want a controlled aspect ration of the cropper, provide the image dimensions,
2. if you want that the cropper by default take the full width and height same as the image src provided,
   then you can achieve that using onMediaLoaded function of the cropper.

// controlled dimension of the cropper.
const dimensions={
height:1024,
width:1024
}

const [cropperSize, setcropperSize] = useState<Size | undefined>(undefined)


// calculate the aspect ratio
const aspectRatio = useMemo(() => {
    if (dimensions) {
      return heightWidthToAspectRatio({
        width: dimensions?.width ?? 0,
        height: dimensions?.height ?? 0
      })
    } else if (cropperSize) {
      return cropperSize.width / cropperSize.height
    } else {
      4 / 3
    }
  }, [cropperSize, dimensions])
  
  <Cropper
              ...
              aspect={aspectRatio}
              onMediaLoaded={({ naturalHeight, naturalWidth }) => {
                setcropperSize({ height: naturalHeight, width: naturalWidth })
              }}
              ...
 />