Estoy usando Cropper JS de fengyuanchen. Cuando mi cosechadora se carga, todo se ve bien. Pero cuando cambio el tamaño de la ventana, el cuadro de recorte amplía la imagen.

Así se carga:

Y así es como termina después de cambiar el tamaño de la ventana:

Hay un efecto de zoom en el cuadro de recorte que no quiero. Me gustaría poder cambiar el tamaño de la ventana y evitar el efecto de zoom en el cuadro de recorte. A continuación se muestran las especificaciones de mi cultivador y contenedor:

Cultivador:

 croper() { const image = document.getElementById('image'); const cropper = new Cropper(image, { responsive:false, autoCropArea:1, zoomable:false, movable: false, aspectRatio: NaN, viewMode: 2, crop(event) { console.log("***********************************"); console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); console.log(event.detail.rotate); console.log(event.detail.scaleX); console.log(event.detail.scaleY); this.data = this.cropper.getData(); document.getElementById("demo").innerHTML = JSON.stringify(this.data); var contData = cropper.getContainerData(); //Get container data }, }); cropper.setCropBoxData({ height: contData.height, width: contData.width }) //set data }

Envase:

 <div class="col-md-8 col-sm-6 grid-margin stretch-card" id="image_box" align="center"> <div class="card text-center" style=" overflow: hidden; height: 100vh;"> <!-- <div class="card-body"> --> <!-- <label id="file-drag"> --> <img id="image" style="max-width: 100%; display: block; " src="static/template/{{img}}.png" alt="Preview"> <span id="preview">La vista previa de la imagen de la plantilla irá aquí</span> <!-- </label> --> <!-- </div> --> </div> </div>

¡Gracias!