Mathematical calculations when cropping elements with different proportions?

Question

JavaScript

Hello! I am writing an application that has a resize crop. I got stuck on resizing after crop, I can’t figure out the calculations during resizing, the rectangle that is stretched has a picture that should adapt to this rectangle.
There are no problems with the usual resize, but after the crop, the sizes and proportions of the picture and the rectangle change.
If you are not very interested in reading what I wrote below, then straight to the point:
I need help with resizing calculations for two elements - a rectangle that is stretched and a picture inside it. Due to the different sizes of the rectangle and the image after the crop, I can't find the right formula to correctly substitute the image under the rectangle. At the end of the link to the video and code.
How it works:
Element structure:

div.template-element
    div.template-element-inner
      img.template-element-content

there is a Selectable class that, when you click on .template-element, puts a rectangle on this element in size and coordinates. This rectangle can be stretched, and the element is stretched along with the rectangle (the Resizable class and the callback in the Selectable class nested in the resize:move event are responsible for this).
When you double-click on the element, a crop appears and here is the most interesting thing:
Initially, the rectangle and the picture have the same dimensions, that is, the proportions are also the same, but when the picture is cropped, the rectangle becomes smaller and the picture remains in its original dimensions.
And here already I can’t calculate the correct substitution of the picture under the rectangle when resizing. Now, when resizing, the picture is also stretched, but it is shifted along the left / top, that is, not correctly.
I made a video with an example and uploaded the code to the codepen:
Video :
I showed an example of the resize that I want to do on the site canva.com (right window) and my resize (left window).
Code :
Just don't be scared, please, there are 825 lines, but you don't need to look at everything, only the callback in the resize, it starts from line 692 and ends at line 745, there are mostly comments with explanations.
I'm not going to rewrite the canvas, I gave their resize as an example.

Answer 1

Well, of course, it's overkill. The error is fixed quite simply:

if (img) {
        //Масштаб ресайза
  let scale = this.box.clientWidth/this.resizable.box.source.width;
        //Соответственно изменяется размер изображения
  img.style.height = img.sourceRect.height *scale + 'px';
        img.style.width = img.sourceRect.width *scale + 'px';
  let left = тут свойство css left изображения до ресайза
  let top = ...
        //Не забывает смещать положение изображения согласно масштабу
  img.style.top = top*scale+'px';
        img.style.left = left*scale+'px'; 
      }

Answer 2

don't be wise. use canvas. there it is done in a couple of lines without calculations.