Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

323
Views
How to avoid the magnifying zoom my cropbox has in Cropper js?

Im using Cropper JS by fengyuanchen. When my cropper loads everything looks ok. But when I resize the window the cropbox zooms in the image.

This is how it loads:

enter image description here

And this is how it ends after the window resizing:

enter image description here

The is a zoom effect in the cropbox that I don't want. I'd like to be able to resize the window and avoid the zoom effect in the cropbox. Below are my cropper and container specifications:

Cropper:

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
            }

Container:

<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>

Thanks!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!