I intend to have user uploaded images in my project. And i want it to always take the 100% width and height of my div with no cropping css styles applied
So I plan to either force the user to upload an image with a white background so i can manipulate it with jimp library or the user uploads a square image.
So, i want to ask if that is a good idea or there are better recommendations
Honestly, both options sound like fairly bad UX choices. Wouldn’t you find it annoying if a site had either of those as a requirement for uploading an image?
You should do whatever is needed on behalf of the user instead.
It’s not a fancy type of image. It’s just product image(s). It has to be a particular size in other to fit into the design.
You say they aren’t good options. I don’t have any idea what i can do.
Meanwhile i inspected some e-commerce websites and they seem to be using square images; not just some CSS object-fit…
You can let the user know about the expected dimensions and then crop/resize the image for them if it is not the correct dimension (without the user having to do anything).
You can also implement a UI for the image upload that lets the user crop the image in the browser. I don’t really know too much about e-commerce CMS systems but I wouldn’t be surprised if at least some of them had such an image upload implementation with a crop feature.
Not sure if this project is using a framework or plain HTML/CSS/JS but I’m sure there are pre-made libraries/components with a UI for doing image manipulation you can use. Even with help from a library/component, it is obviously more work, but it’s also a nice feature to have.
Random example of a React component:
I am using react. The library you suggested will do.
Thank you