[JavaScript][CSS]wypełnianie diva wycentrowanym obrazkiem Opcje

[stellatus]

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.

Ten post edytował stellatus 24.06.2021, 13:01:15

[stellatus]

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:

Kod

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

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

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

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

Ten post edytował stellatus 29.06.2021, 01:28:01