cropper.sample.js

// fixed width and height

$('#banner').cropper({
   movable: false,
   resizable: false,
   rotatable: false,
   dragCrop: false,
   dragMode: 'move',
   cropBoxResizable: false,
   responsive: true,
   // viewMode: 1,
   ready: function () {
       width = document.getElementById('banner').width;
       heigth = document.getElementById('banner').height;
       var cropheigth = 350;

       if (width => 1400) {
           cropheigth = width * 4 / 16;

           if (cropheigth <= 350) {
               cropheigth = 350
           }
       }

       $('#banner').cropper('setData', {
           height: cropheigth,
           width: width,
       });
    },
});