Setting the size of the Croppr instance itself about croppr.js HOT 4 CLOSED

For Croppr to work on scaled images, the proper way is to resize all its img tags and not the div tags. For instance:

.croppr img {
  width: 500px;
}

But I understand that it does seem like a hacky, undocumented way to get it to work. I suppose a simple fix would be for Croppr to simply retain existing styling and class names of the img tag after initialising (it currently does not).

EDIT:
With the latest commit 4ff4d92, Croppr would now simply obey the size of its parent containers. So the above method is outdated, and all you need to do now is to just set the size of its enclosing element.

from croppr.js.

p.s. I tried changing the CSS of one of Croppr's divs, but was unsure how to "refresh" Croppr, so to speak, to let it know that the container size has changed. Not sure if that's how you'd recommend it to happen, anyway :)

from croppr.js.

A faster way to replicate the situation I'm talking about is by changing the unsplash line in index.html to something like...

<img src="https://unsplash.it/2000/2000/?random" alt="" id="cropper">

Does handling images that are big (like images users upload for profile pictures, for example) seem feasible to you, or potentially out of scope?

from croppr.js.

I see. I'll try this! Another way to deal with this, that I came to yesterday, was to resize the image first. I've added a bit more code to handle that part, which is fine, but I do feel like cropping images straight from a users filesystem that might already be very large might be a common use case.

I'll leave it to you to think about. Not sure where to go with it next. Thank you @jamesssooi :)

from croppr.js.