Removing spaces and scaling each image proportionally with javascript

Question

Here is my task

in the image above, I drag and drop each image from the container on the right side to the left container, and I also provide resize, rotation, flip / flop, forward / back, etc. for the image. Each image has a specific height, top and left, and we can drag any image.

After dragging and dropping, I need to publish these elements, now my task is above the sample sample. I dropped 2 images. The red line should remove empty spaces and proportionally enlarge the image.

Finally, I want Output

Please help me

Thanks in advance