How to crop an image with CSS using width, height, x and y axis?

Question

I am creating a cropping feature with react-easy-crop. I will save the user's image along with pixel coordinates for their cropping preference.

What I am trying to do is use react-easy-crops parameters to crop the banner image to be displayed on a user profile.

react-easy-crop which uses react-image-crop yields the following parameters:

{ width: integer, height: integer, x: integer, y: integer } 

With CSS

How would I use THIS data to render a cropped image in CSS?

(I know there are ways to crop with CSS, but I am trying to use the above data.)

With Javascript

I have attempted to convert the Image URL into a blob or base64 to apply cropping, but I run into CORS errors as the image is from Azure blob. I would prefer a CSS solution rather than delving into security matters.

Answer 1

Welcome to Stack Overflow. Here 2 articles I found.

• https://www.digitalocean.com/community/tutorials/css-cropping-images-object-fit
• https://www.w3schools.com/css/css_dimension.asp
• https://www.javatpoint.com/how-to-change-image-size-in-css

As far as I have researched, you cannot do that (width and height with CSS). The only way possible is by doing this:

<img src="assets/images/image.png" width="50" height="50">

As G-Cyrillus said, you can use the object-fit property.

And for X and Y, the best shot you have that I know of is using padding-left: 5px and margin-left: 5px . Margin is for the outside and padding for the inside I believe.

Hope this helps and happy coding!