Czasem chcemy, aby zdjęcie na stronie zmniejszało się wraz ze zmniejszającą się wielkością ekranu. Można to łatwo osiągnąć stosując krótki zapis w css.
Dla elementu rodzica – najczęściej diva – ustawiamy maksymalną szerokość (max-width) w postaci szerokości zdjęcia. W tym przykładzie ustawiłam też czerwoną ramkę, aby widać było granice diva.
Szerokość zdjęcia ustawiamy zaś na 100% szerokości rodzica. Wysokość zdjęcia uatwiamy na auto, aby dostosowywała się automatycznie do zmieniającej się szerokości.
Efekt jest taki jak widoczny poniżej. Spróbuj zmniejszyć okno przeglądarki i zobacz, jak razem z nią zmniejsza się zdjęcie papugi.
Kod można zobaczyć na codepen:
See the Pen YoBwrR by Joanna (@JoannaEl) on CodePen.
No dobrze, obraz dostosowuje swoje rozmiary do rozmiarów ekranu, ale nie zmienia swojej faktycznej wielkości. Zdjęcie papugi powyżej ma 59 KB niezależnie od tego, czy wyświetlane jest na dużym, czy małym ekranie.
W takim przypadku, jeśli ktoś otworzy stronę na telefonie, to niepotrzebnie będzie „ściągał” takie duże zdjęcie, co nie tylko zużyje więcej transferu, ale też spowolni ładowanie się strony.
Rozwiązaniem jest „serwowanie” takiego samego zdjęcia w różnych rozmiarach, w zależności od wielkości ekranu. Dla użytkowników korzystających z desktopów wyświetlić możemy zdjęcie o szerokości 500px, dla tabletów 350px, a dla telefonów 200px. Potrzebujemy tylko tego samego zdjęcia w kilku kopiach. Można podmieniać źródło zdjecia po rozpoznaniu wielkości ekranu w Javascript, ale można też zrobić to w samym HTML. Chcesz wiedzieć jak? Zobacz mój kolejny wpis:
