Biblioteka Panzoom (https://timmywil.com/panzoom/demo/) umożliwia przesuwania i powiększanie obrazu w divie:
https://codepen.io/reti/pen/MWpMNYE
Wszystko działa prawidłowo.

Teraz 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://drive.google.com/file/d/1znFq-EJVE4...uMH0bhRsfz/view

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

https://stackoverflow.com/questions/1155238...center-an-image

https://stackoverflow.com/questions/1891857...ages-aspect-rat

szukaj w google po angielsku

Dzięki, ale Nie rozumiem w czym mogłyby mi się przydać te linki. W tytule jest niesłuszny tag CSS. Otóż nie da się tego raczej rozwiązać poprzez CSS. Gdy używamy CSS, to "panzoom nie zapamiętuje tego" (nie wiem co tam się dokładnie dzieje) i gdy klikamy na obraz myszką, to wartości pan i zoom przeskakują do ostatniej zapamiętanej pozycji. Konieczne jest w tym przypadku używanie API biblioteki. Chyba jestem już blisko: https://codepen.io/reti/pen/MWpMNYE

Dodałem do JS tylko takie linijki:


--------------------------------------

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

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

W Twoim kodzie img można tak przesunąć, że będzie poza granicą div-a i wtedy jedynym rozwiązaniem jest przeladowanie strony aby img znowu znalazło się w div. Jeśli tak to sobie założyłeś to ok, ale to nie jest ok.
Testowany na androidzie.

"W Twoim kodzie img można tak przesunąć, że będzie poza granicą div-a i wtedy jedynym rozwiązaniem jest przeladowanie strony aby img znowu znalazło się w div. Jeśli tak to sobie założyłeś to ok, ale to nie jest ok.
Testowany na androidzie."

@gino zgadza się, oczywiście masz rację, muszę to dopracować