Uwielbiam nowy design http://thesixtyone.com. Zastanawiam się, w jaki sposób proporcjonalnie rozciągają obraz, aby pasował do całego tła? Czy używają CSS/Javascript lub innych sztuczek?W jaki sposób TheSixyOne.com proporcjonalnie rozciąga obraz do pełnej strony?
Używane są zarówno CSS, jak i Javascript.
Podejmuje większą z wysokości lub szerokości, ustawia odpowiedni wymiar obrazu, następnie oblicza stosunek wymiaru oryginalnego do nowego wymiaru, a następnie stosuje ten stosunek do wymiaru przeciwległego.
Na przykład. Załóżmy, że oryginalne zdjęcie miało wartość 100 x 100. Jeśli twój ekran ma rozmiar 200 x 100; następnie napina pierwszy wymiar (200 jest większy niż 100). Jest to stosunek 2: 1, więc robi to samo co w innym wymiarze. Wynikowy obraz to właściwie 200x200.
Dodaj więcej kodu, aby zachować całość wyśrodkowaną (tak, aby nieekranowane części wymiaru wynajmującego były równe) i voila.
W moim przykładzie, obraz zostanie przeniesiony o 50, tak że widać środkowy 100 (rozmiar ekranu) obrazu, który został rozciągnięty do 200.
Obraz jest rzeczywiście znacznik DIV z ustawioną właściwością obrazu tła.
Nie wiesz, co biblioteka they'e użyciu javascript ale w ich źródła zrobiłem wyszukiwania dla „rozmiar” i stwierdził:
Event.observe(window,"resize",t61.background.sync_size);
który wygląda jak oni dołączenie obsługi zdarzeń do window.onresize.
Wygląda na to, że obraz jest wyśrodkowywany za każdym razem, gdy zmienia się rozmiar strony – Phen