Глеб Ефрем

Не так давно столкнулся с аналогичным поведением, мне помогло:

Добавление стилей для блока на уровень выше от изображения (пример ниже).

position: relative;
  max-width: 100%

Пример участка HTML-кода:

<div class="modal-body">
  <div class="img-container">
    <div class="row">
      <div class="col-md-12" style="position: relative;max-width: 100%;">
        <img style="max-width: 100%;" id="test_image" class="crop-image" src="https://avatars0.githubusercontent.com/u/3456749">
      </div>
    </div>
  </div>
</div>

Пример участка JS-кода:

$modal.on('shown.bs.modal', function () {
  cropper = new Cropper(image, {
    aspectRatio: 2 / 1,
      viewMode: 2,
        preview: '.preview',
        viewport: {
            width: 150,
            height: 200,
        },
        enforceBoundary: false,
        enableExif: true
      });
    }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
});