Cropper.jsのトリミングエリアの大きさを固定したい

前提・実現したいこと

Cropper.jsを用いて画像のトリミングを行っています。
デモサイトと同じくトリミングエリアの大きさを固定したいのですが、
アップロードした画像の大きさによってトリミングエリアの大きさが変わってしまい、UIが崩れるので困っています。

該当のソースコード

HTML
1<div class="modal-bg" id="cropper-modal">
2    <div class="modal">
3        <h2>トリミング</h2>
4        <div>
5            <img id="cropper" src="./images/sample.jpg">
6        </div>
7        <button type="button" id="cropped">完了</button>
8    </div>
9</div>

JavaScript
1var options = {
2  aspectRatio: 1 / 1,
3  dragMode: 'crop'
4};
5var cropper = new Cropper(image, options);
6// ※photoはたんなるinput[type='file']
7$("input[name='photo']").on('change', function () {
8  $("#cropper-modal").css('display','block');
9  var files = this.files;
10  var file;
11
12  if (cropper && files && files.length) {
13    file = files[0];
14
15    if (/^image/\w+/.test(file.type)) {
16      uploadedImageType = file.type;
17      uploadedImageName = file.name;
18
19      if (uploadedImageURL) {
20        URL.revokeObjectURL(uploadedImageURL);
21      }
22
23      image.src = uploadedImageURL = URL.createObjectURL(file);
24      cropper.destroy();
25      cropper = new Cropper(image, options);
26      inputImage.value = null;
27    } else {
28      window.alert('Please choose an image file.');
29    }
30  }
31});