Как указать размеры для cropperjs?

Question

[Dmitry]

Использую cropperjs в модальном окне, при загрузки в него изображение, а именно изображение высокой длинны модальное окно как и сам cropper растягиваются на всю высоту изображения. Менял стили у разных контейнеров и у самой модалки, но изображение просто обрезается, а сам кроп всё равно вылезает с рамки. Как задать максимальную высоту для изображения в cropperjs?

Заранее спасибо.

Answer 1

[Глеб Ефрем]

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

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

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;
});