Panzoom, wycentrowanie obrazu

Biblioteka Panzoom (https://timmywil.com/panzoom/demo/) umożliwia przesuwanie i powiększanie obrazu w divie:
https://codepen.io/reti/pen/jOmObwJ albo: https://srv19859.microhost.com.pl/kadrowanie/
Wszystko działa prawidłowo.

Teraz chciałbym, aby te zdjęcia wypełniły swoje divy, jak również żeby były w tych dovach 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://drive.google.com/file/d/1znFq-EJVE4Dv2j9sc3xZUZuMH0bhRsfz/view?usp=sharing

Na zoomowanie znalazłem prosty sposób. JS od linijki 16:
panzoom1.pan(0, 0);
panzoom1.zoom(300 / document.querySelector('.zoom-area1 img').height);
panzoom2.pan(0, 0);
panzoom2.zoom(300 / document.querySelector('.zoom-area2 img').width);

Problem zoomowania jest już dla mnie w satysfakcjonujący sposób rozwiązany. Pozostaje teraz tylko kwestia wycenetrowania tych zdjęć? Jak to zrobić?

stellatus napisał(a):

Na zoomowanie znalazłem prosty sposób
(...)
Problem zoomowania jest już dla mnie w satysfakcjonujący sposób rozwiązany.

A na czym polegał ten problem z zoomowaniem? Bo nie bardzo rozumiem, co dokładnie chcesz osiągnąć.

@Freja Draco: Trzeba zdjęcie tak pomniejszyć, żeby jego wysokość nie była większa od wysokości diva, gdy zdjęcie ma orientację horyzontalną albo żeby jego szerokość nie była większa od szerokości diva, gdy zdjęcie ma orientację wertykalną, czyli tak jak tutaj: https://drive.google.com/file/d/1znFq-EJVE4Dv2j9sc3xZUZuMH0bhRsfz/view

Dobrym tropem wydaje się być getBoundingClientRect(). Właśnie to testuję, ale dzieją rzeczy których nie rozumiem. Próbuję np. przesunąć div .zoom-area2 do krawędzi wrappera. Wartości top są chyba nieprawidłowe, bo zostaje przerwa:
https://pasteboard.co/K8H3APA.png

Chyba się udało: https://codepen.io/reti/pen/JjNjMVa

Wystarczył jednak CSS. Będę to jeszcze dokładnie testował.