[JavaScript][CSS]Cropper.js, wypełnianie diva wycentrowanym obrazkiem Opcje

[stellatus]

Zmodyfikowałem przykład z 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 orientację 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: Temat: JavaScriptCSSwypelnianie diva wycentrowanym obrazkiem tylko biblioteka inna.

[stellatus]

@trueblue Dzięki, ale niestety nie działa: https://drive.google.com/file/d/1kQ8tQQZOKr...iew?usp=sharing

Chyba przez CSS się tego nie da zrobić. Myślę, żeby pokombinować jakoś z metodami:
- zoom(), tzn. powiększać obrazek w zależności od tego ile brakuje do 300px
- zoomTo(), tzn. pomniejszać obrazek w zależności od procentowej różnicy pomiędzy oryginałem a obrazkiem pomniejszonym.