Zdjęcie w div

Witam,

mam taki problem. Piszę swoją stronę i utknąłem z “pokazywaczką obrazków”. Z pewnych przyczyn nie odpowiada mi żadna z gotowych “pokazywaczek”. Z czym mam problem? Obrazek jest wyświetlany w div-ie. Ten div zmienia się dynamicznie (jego długość i szerokość) w zależności od wielkości okna przeglądarki (odpowiednia funkcja javascript jest wywoływana przy zdarzeniu onload i onresize w body). Czyli każde przeskalowanie okna powoduje “dopasowanie się” zdjęcia do dostępnej powierzchni wyświetlania.

Na początku w znaczniku img src dałem width=“100%” i height=“100%”. Działało to super. Problem w tym, że jak dodałem deklarację typu dokumentu, to rozwiązanie to działać przestało. I to niezależnie od tego czy dokument jest “strict” czy “transitional”.

Kolejnym krokiem było spróbowanie reguł css. Dopisałem więc klasę css dla zdjęcia (definiującą parametry “width” i “height” ) a do funkcji javascript przeliczającej rozmiar div-a dodałem cześć przeliczającą rozmiar obrazka. Tu małe zdziwienie. O ile div bez problemu się skalował, to zdjęcie nie chce się skalować. Zauważyłem, że klasa css obrazka zawsze “trzyma” parametry, które są “na sztywno” do niej wpisane i zupełnie nie reaguje na ich przełączanie javascriptem - w przeciwieństwie do div-a.

Deklarację typu dokumentu muszę dodać, bo cały ten “resizer” jest elementem pewnej większej całości.

Zatem moje pytanie jest takie: jak zrobić aby zdjęcie wyświetlanie w div-ie, przyjmowało dokładnie taki rozmiar jak div?

Poniżej (nie)działający kod:

http://palmy.zamek.net.pl/res/new.php?zdjecie=kiwi.jpg

(działa w najnowszym Firefoksie, Operze, IE, Chrome, Safari - proszę spróbować przeskalować okno po wczytaniu zdjęcia)

wystarczy dodać deklarację i… działać przestaje:

http://palmy.zamek.net.pl/res/new2.php?zdjecie=kiwi.jpg


Szukałem dość intensywnie w sieci i nie znalazłem rozwiązania. Proszę więc nie odsyłać mnie do google, kursów html lub css. :wink:

Witam,

po pierwsz ja bym w ogole użył jQuery, bo zabawa z wysokosciami i szerokosciami jest oczywiscie inna dla poszczególnych przeglądarek. jQuery w dużym stopniu te różnice niweluje. Poza tym odpowiednio bedzie reagował na typ dokumentu HTML/XHTML. Kiedyś próbowałem rozwalić problem wysokości elementów w różnych przeglądakach i znalazłem coś takiego: http://www.quirksmode.org/dom/w3c_cssom.html

Co do kodu to powiem, że mnie zaintrygowałeś i zaraz usiąde i się tym pobawie.

Rozumiem, że ma to wyglądać tak: div ustawia sie na cały obszar widoczny przeglądarki. Co za tym idzie obrazek dostosowuje sie do wielkości div’a. Dobrze rozumiem? Jeśli tak jsst to nawet sie zastanawiam, czy jest sens użycia tego Diva czy wystarczy sam IMG.

Pozdrawiam and be on touch :wink:

mrbungle

Dzięki za odpowiedź,

Raczej nie chciałbym używać takich kombajnów. Po drugie to nawet nie wiem jak używać JQuery.

Hmm… Chyba niezupełnie. W ramach testów udało mi się bez problemu napisać wersję skalującą samego div-a (bez zdjęcia w środku) i działało to bez żadnych cudów z każdą przeglądarką.

Ale nie znalazłem tu nic o obrazkach.

Nie. Po pierwsze div trzyma właściwy aspekt zdjęcia i nie pozwala mu się “wydłużyć” lub “poszerzyć”. Po drugie nie ma to zajmować 100% widocznego obszaru przeglądarki. Z tym by nie było problemu. Wysokość div-a na zdjęcia ma mieć wymiar dokładnie: wysokość_okna - 90 px. Szerokość skaluje się odpowiednio.

Jak na razie jedyne co mi przychodzi do głowy to zrobienie czegoś takiego: w przypadku onresize wywołuję funkcję javascript, która zapisuje do ciastka wysokość obszaru roboczego przeglądarki i przeładowuje stronę. Potem po przeładowaniu php-em odczytuję z ciastka wysokość i skaluję zdjęcie do odpowiednich wymiarów, obliczam wymiary diva-a i generuję html-a. Ale wydaje się to trochę jak strzelanie czołgiem do wróbla. No i mamy niepotrzebne przeładowanie strony.

Co do użycia jQuery - to wedle uznania a co do łatwości operacji - zdecydowanie łatwiejsze niż “zwykły kod” JS. I faktycznie jest to kombajn ale jak dla mnie faktycznie szybkość jest wystarczająca.

Co do wysokości to głównym problemem jest jak zwykle było IE. Nie wiem może już IE8 jest zgodny w okreslaniu co poszeczólny atrybut oznacza. Ale pamietam ostrą zabawe z IE6 i do tego nawiązuję. Co do linku to podaje jak dla poszczególnych typów dokumentów interpretowane są poszczególne metody i właściwości.

Czy o coś takiego chodziło? http://www.mrbungle.nazwa.pl/www/dobrep … /test.html

sorak uparłem sie na jQuery - “niestety” tak mi jest wygodniej.

Co do zasady działania: usunąłem kompletnie diva… i manipuluje na ID obrazka. position absolute troche psuł całość.

Dokładnie o coś takiego. Dzięki za to. Jeśli nie uda mi się okiełznać js/css to chyba faktycznie będę zmuszony użyć tej biblioteki.

Cóż. Div-y i całą resztę mogę sobie dopisać potem. Oby tylko obrazek się skalował. Tymczasem trochę pokombinowałem. Wyrzuciłem tymczasowo wszystko co zbędne.

http://palmy.zamek.net.pl/res/new8.php? … rgenia.jpg

Efekt jest taki, że działa w najnowszej Operze i… IE8.

Nie działa w Firefoxie, Chrome i Safari. W Firefoksie testowo wyświetliłem zmienne na ekranie. Są przeliczane prawidłowo. Jednak wspomniane trzy przeglądarki to ignorują i nowa, przeliczona, szerokość i wysokość “nie zaskakuje”. Czy ktoś ma pomysł jak to zmienić?

Amożesz kod pokazac jak to zrobiłeś? Może jakoś naprowadzę… pomimo, że bazuje na jQuery to normalnego Js pamiętam :stuck_out_tongue:

'.$zdjecie.'

'; ?

Uwielbiam takie generowanie HTML :stuck_out_tongue: ale no niestety czasem trzeba. Myślę, że jest możliwość opanowania sprawy tylko za pomocą JS. Boje sie tylko nad interpretacją poszczególnych wielkości innerHeight, outerHeight itd.

Poza tym w jQuery, nawet podobna sprawa jak u Ciebie, niezadziała czasem ustawienie ze stylu CSS height albo width. dlatego jQuery wprowadził metode .height()/innerHeight() itd… a deklaracja typu el.css(‘height’, ‘100px’) - działa tak samo jak el.style.height - czyli nie robi nic , choć na “zdrowy rozum” powinno zadziałać. Doświadczylem to już nie raz.

Ale skoro jQuery ma to opanowane tak więc można by z czystego JS to zrobić, jeśli wolisz ofkors :wink: Postaram sie czegos poszukać ale to już jutro.

P.S. scriptaculos kiedyś miał coś podobnego… może tam coś znajdziesZ? ale trzebaby było przewalić kod JS tego prehistorycznego frejmłorka :wink: