Responsive Images Made Easy dzięki ResponsifyJS

Nowoczesna sieć powinna być w 100% responsywna, a nowsze biblioteki sprawiają, że jest to coraz bardziej możliwe.

Z darmowymi wtyczkami, takimi jak ResponsifyJS, jeszcze łatwiej jest uruchomić witryny na wszystkich urządzeniach. To darmowa wtyczka jQuery bierze pojemnik z obrazami i dynamicznie je zmienia w oparciu o różne rozmiary ekranu.

Od różnych pojemników trzymaj obrazy inaczej, mogą zmieniać rozmiar w bardzo dziwny sposób. Zdarza się, że zdjęcia osób i ich twarze mogą zostać obcięte po zmianie rozmiaru na telefonie komórkowym.

Wtyczka Responsify została stworzona, aby rozwiązać ten problem. Może działać automatycznie, ale leży w nim prawdziwa magia definiowanie własnego obszaru ostrości na zdjęciu.

Używa wewnętrzny system opisów dziesiętnych aby dowiedzieć się, gdzie powinien znajdować się obraz. Na przykład możesz definiować pozycje Jak na przykład data-focus-top który “bloki w” pewien segment obrazu.

Te dane muszą zostać przekazane w postaci miejsc dziesiętnych, na przykład .5 miejsc dziesiętnych 50% obrazu (lewo / prawo lub góra / dół). Naturalnie jest to dość mylące, aby zrobić to samodzielnie. Ale jest darmowa aplikacja Responsify to pozwala obliczaj pozycje dynamicznie w przeglądarce.

Po prostu prześlij zdjęcie, zdefiniuj obszar ostrości, a następnie skopiuj / wklej kod obrazu na swoją stronę. Wtyczka Responsify będzie miała wszystkie dane potrzebne do prawidłowej zmiany rozmiaru obrazu na mniejszych ekranach.

Możesz znaleźć sporo linki demo na żywo w repozytorium GitHub, w tym fragmenty kodu do kopiowania / wklejania do witryny.

Ta wtyczka nie jest idealnym rozwiązaniem dla każdego projektu. Czasami będziesz chcieć obrazy do zmiany rozmiaru bez stałych obszarów ostrości. Ale jeśli używasz kraty murowane z jQuery dodawanie ResponsifyJS do twojego stosu nie boli.

Aby dowiedzieć się więcej, odwiedź stronę główną wtyczki, aby zobaczyć prezentację na żywo, link do pobrania i pełny przewodnik konfiguracji.