 [JavaScript][CSS]wypełnianie diva wycentrowanym obrazkiem |
  |
| [JavaScript][CSS]wypełnianie diva wycentrowanym obrazkiem |
  24.06.2021, 11:24:45
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) 
 |
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 |
 |
 
|
|
24.06.2021, 13:29:25
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 516 Pomógł: 63 Dołączył: 27.08.2012 Ostrzeżenie: (0%)
|
|
|
|
|
 29.06.2021, 01:27:14
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%)
|
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 |
|
|
|
|
29.06.2021, 06:52:09
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 324 Pomógł: 52 Dołączył: 18.02.2008 Ostrzeżenie: (0%)
|
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. |
|
|
|
|
29.06.2021, 22:09:55
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%)
|
"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ć |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 21.07.2025 - 17:13 |
