无法缩放cropit.js中的小图像

Question

After reading the documentation, I still didn't found the solution on how can I resize the image even if the image is small. But it is working on big images, but then again it is not working on small images. Please see my code below:

 $(document).ready(function(){ $('#image-cropper').cropit({ 'minZoom': 2, 'allowDragNDrop': false, 'smallImage': 'allow' }); }); 

 .cropit-preview{ background-color: #f8f8f8; background-size: cover; border: 5px solid #ccc; border-radius: 3px; margin-top: 7px; width: 400px; height: 400px; display: inline-block; } 

 <div id="image-cropper"> <div class="cropit-preview"></div> <input type="range" class="cropit-image-zoom-input" /> <input type="file" class="cropit-image-input" /> <div class="select-image-btn">Select new image</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script> 

Sample Image

Answer 1

Try setting max zoom
reference

 $(document).ready(function(){ $('#image-cropper').cropit({ 'minZoom': 2, 'allowDragNDrop': false, 'smallImage': 'allow', 'maxZoom' : 5 }); $(document).on('click','.zoomOut',function(){ changeZoom(); }); $(document).on('click','.zoomIn',function(){ changeZoom(true); }); function changeZoom(increase){ var elm = $('#image-cropper'); var zoom = elm.cropit('zoom'); zoom = increase ? zoom + 0.05 : zoom - 0.05; elm.cropit('zoom', zoom); } }); 

 .cropit-preview{ background-color: #f8f8f8; background-size: cover; border: 5px solid #ccc; border-radius: 3px; margin-top: 7px; width: 400px; height: 400px; display: inline-block; } 

 <div id="image-cropper"> <div class="cropit-preview"></div> <button class="zoomOut">Zoom Out</button> <input type="range" class="cropit-image-zoom-input" /> <button class="zoomIn">Zoom In</button> <input type="file" class="cropit-image-input" /> <div class="select-image-btn">Select new image</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script>