javascript - Set fengyuanchen jQuery Cropper.js v3.0.0 Preview Size to Same as Image -

i'm having slight issue fengyuanchen jquery cropper.js v3.0.0. i'm trying override default preview code make same size original image's display size.

the problem i'm having once image's height exceeds of original image's display size, preview becomes quite bit larger original. i'd prefer remain @ same height.

here behavior i'm describing. note preview's height:

the default behavior displays preview smaller original image:

what's i'd make preview remain @ same height original image, , not exceed it:

here code:

<div class="col col-6">   <img id="image" src=picture.jpg> </div> <div class="col col-3">   <div class="preview"></div> </div>  //css .preview {   overflow: hidden;   width: 200px;    height: 200px; }  //js: $(function() {   var $preview = $('.preview');   var  cropper = $('#image').cropper({       ready: function (e) {           var $clone = $(this).clone().removeclass('cropper-hidden');            $clone.css({             display: 'block',             width: '100%',             minwidth: 0,             minheight: 0,             maxwidth: 'none',             maxheight: 'none'           });            $preview.css({             width: '100%',             overflow: 'hidden'//,            //maxheight: $(this).cropper('getcontainerdata').height + 'px'          }).html($clone);        },       crop: function(e) {         var imagedata          = $(this).cropper('getimagedata'),              previewaspectratio = e.width / e.height,              previewwidth       = $preview.width(),             previewheight      = previewwidth / previewaspectratio,             imagescaledratio   = e.width / previewwidth;       //if (previewheight > $(this).cropper('getcontainerdata').height) {          //???      //}         $preview.height(previewheight).find('img').css({                width: imagedata.naturalwidth / imagescaledratio,                height: imagedata.naturalheight / imagescaledratio,                marginleft: -e.x / imagescaledratio,                margintop: -e.y / imagescaledratio         });        }      }); }); 

turns out didn't need code size preview way wanted to. needed set preview's maximum dimensions of original before instantiating cropper.

for reason, needed add 4 pixels height make preview same height original image. perhaps cropper canvas adds height , width around image?

$(function() {   var $image = $('#image'),       $image.height() + 4;    $('.preview').css({       width: '100%', //width,  sets starting size same orig image        overflow: 'hidden',      height:    height,      maxwidth:  $image.width(),      maxheight: height    });    $image.cropper({       preview: '.preview'   }); });