How to make responsive the highlighted cropped part in angular using cropper.js

Question

I am using cropper.js to crop an image in my angular project. In this the cropped part will be highlighted with a div when it is cropped. Here I am binding the crop box values into the div. But when I resize the window, this div is not adjusting in respect to it's cropped part. How do I fix this?

<div
      class="overlay"
      *ngFor="let crop of croppedImages"
      [style.width]="getWidth(crop.width) + '%' "
      [style.height]="getHeight(crop.height) + '%' "
      [style.left.px]="crop.x"
      [style.top.px]="crop.y"
    ></div>

//style
.overlay{
    background-color: grey;
    position: absolute;
}

getWidth(width: number){
    let screenWidth = window.innerWidth;
    
    width = (width/screenWidth) * 100;

    return width;
  }
  getHeight(height: number){
    let screenHeight = window.innerHeight;
    height = ((height/screenHeight) * 100);
    return height;
  }

Answer 1

you can listen to the resize event of the window and update the dimensions of the div accordingly.

@HostListener('window:resize')
onWindowResize() {
  // Update the dimensions of the div when the window is resized
  this.updateCropDimensions();
}

getWidth(width: number): string {
  const screenWidth = window.innerWidth;
  const percentageWidth = (width / screenWidth) * 100;
  return `${percentageWidth}%`;
}

getHeight(height: number): string {
  const screenHeight = window.innerHeight;
  const percentageHeight = (height / screenHeight) * 100;
  return `${percentageHeight}%`;
}

updateCropDimensions() {
  this.croppedImages.forEach(crop => {
    crop.width = (crop.width / window.innerWidth) * 100;
    crop.height = (crop.height / window.innerHeight) * 100;
  });
}

dimensions of the div representing the cropped part will be updated whenever the window is resized.

hope it helpful.