iam follow tutorial from this, to create image framer web app. From that example, croppie.js is used to crop and preview image before upload to backend. And in that example boundary and viewport is set for 400px (width and height), so the code is like this:

  window.croppie = new Croppie(document.getElementById("crop-area"), {
    "url": url,
    boundary: {
      height: 400,
      width: 400
    },
    viewport: {
      width: 400,
      height: 400
    },
  });

What i need is the size for boundary and viewport is 1050px, so my code is like below:

  window.croppie = new Croppie(document.getElementById("crop-area"), {
    "url": url,
    boundary: {
      height: 1050,
      width: 1050
    },
    viewport: {
      width: 1050,
      height: 1050
    },
  });

But when i set size to 1050px the image is out of frame, and also when open from mobile image is out of frame too. So my goal is to crop image in 1050px size, but in responsive screen, i mean it can responsive based on screen size. I have tried using bootstrap img-fluid class but it still not working. Thank you in advance.