Cropper.js, wypełnianie diva wycentrowanym obrazkiem

Question

Zmodyfikowałem przykład ze strony biblioteki cropper.js (https://fengyuanchen.github.io/cropperjs/).

Wersja oryginalna przykładu:https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html

Wersja moja: https://codepen.io/reti/pen/ExmyyaX

Chciałbym, aby te zdjęcia, po załadowaniu wypełniły swoje divy, ale tak żeby były wycentrowane wertykalnie i horyzontalnie, przy czym:
- jeżeli obraz ma orientację horyzontalną, to jego wysokość nie może być większa od diva
- jeżeli obraz ma orinetację wertykalną, to jego szerokość nie może być większa od diva.

Dokładnie tak jak tutaj: https://ibb.co/Twqxy2h

Jak to zrobić? Próbuję na różne sposoby i już skończyły mi się pomysły.

Problem dokładnie taki sam jak w tym poście: https://forum.pasja-informatyki.pl/544778/wypelnianie-diva-wycentrowanym-obrazkiem tylko biblioteka inna.

Answer 1

Problem chyba udało mi się rozwiązać:

function fillCropContainer() {
      var instanceArray = [cropper1, cropper2]
      var ratio
      instanceArray.forEach((el) => {
        var imgNatHeight = el.imageData.naturalHeight
        var imgNatWidth = el.imageData.naturalWidth
        if (imgNatHeight < imgNatWidth) {
          ratio = 300 / imgNatHeight
          el.zoomTo(ratio)
        } else {
          ratio = 300 / imgNatWidth
          el.zoomTo(ratio)
        }
      })
    }

Muszę to jeszcze tylko potestować.