iam sigue el tutorial de this , para crear una aplicación web de marco de imagen. A partir de ese ejemplo, croppie.js se usa para recortar y obtener una vista previa de la imagen antes de cargarla en el backend. Y en ese ejemplo, el límite y la ventana gráfica están configurados para 400 px (ancho y alto), por lo que el código es así:

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

Lo que necesito es que el tamaño del límite y la ventana gráfica sea de 1050 px, por lo que mi código es el siguiente:

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

Pero cuando configuro el tamaño en 1050 px, la imagen está fuera de marco, y también cuando se abre desde un dispositivo móvil, la imagen también está fuera de marco. Entonces, mi objetivo es recortar la imagen en un tamaño de 1050 px, pero en la pantalla receptiva, quiero decir que puede responder según el tamaño de la pantalla. Intenté usar la clase img-fluid de bootstrap pero aún no funciona. Gracias de antemano.