search

sekoyo / react-image-crop

A responsive image cropping tool for React
ISC License
3.9k stars 344 forks source link

expand image to fit container #600

Open tonypeng opened 3 months ago

tonypeng commented 3 months ago

as mentioned in #108, i've set a width on the parent container:

<div style={{width: 400}}>
  <ReactCrop ...>
    <img ... />
  </ReactCrop>
</div>

This works well when the image is larger than the container (the image is resized downward to fit in the container), but when the image is smaller than the container, it doesn't scale up to fit the container. Any way to accomplish this behavior?

ayushgarg-git commented 3 months ago

Hey @tonypeng I used the "style" prop to specify width and height of the Crop container and added {width:"100%",height:"100%", objectFit:'contain'} as the style for the enclosed image. The image expands to the size that you specify for the Cropper nicely.