Czy kiedykolwiek zastanawiałeś się, jak optymalnie wyświetlać obrazy na różnych urządzeniach? Czy wiesz, że istnieją sprytne techniki CSS, które mogą pomóc Ci w tym zadaniu? Szykuj się, bo zaraz podzielę się z Tobą całą masą cennych informacji na ten temat!
Jako miłośnik stron internetowych i webmaster ze stażem, od lat zmagam się z wyzwaniem, jakim jest wyświetlanie obrazów w sposób responsywny. Wierzcie lub nie, to wcale nie jest takie proste, jak mogłoby się wydawać. Różne rozdzielczości ekranów, różne proporcje, różne wymagania użytkowników – to wszystko trzeba wziąć pod uwagę. Na szczęście CSS oferuje nam całe mnóstwo narzędzi, które znacznie ułatwiają to zadanie. Pozwólcie, że Wam je przedstawię!
Technika object-fit
Pierwszą z technik, o których chcę Wam opowiedzieć, to object-fit. To naprawdę potężne narzędzie, które daje nam pełną kontrolę nad tym, jak obraz ma się dopasować do kontenera, w którym się znajduje. Wyobraźcie sobie, że macie duży obraz, który chcecie umieścić w małym elemencie na stronie. Bez object-fit mielibyście do wyboru albo rozciągnięcie obrazu, albo przycinanie go. Ale z object-fit możemy zdecydować, czy chcemy, aby obraz się dopasował (contain), wypełnił cały kontener (cover), czy może zachował proporcje (none lub scale-down). To naprawdę robi różnicę!
Zobaczmy, jak to wygląda w praktyce:
css
.image {
width: 300px;
height: 200px;
object-fit: cover;
}
W tym przykładzie mamy obraz o szerokości 300px i wysokości 200px. Ustawiliśmy object-fit: cover, co oznacza, że obraz wypełni cały kontener, zachowując swoje proporcje. Jeśli obraz byłby szerszy lub wyższy niż kontener, zostałby przycięty, aby dopasować się do wymiarów.
Oczywiście object-fit ma jeszcze kilka innych wartości, które warto poznać:
contain– obraz zostanie dopasowany do kontenera, zachowując proporcje, a wolne miejsca zostaną wypełnione tłemnone– obraz zachowa swoje naturalne rozmiary, niezależnie od rozmiaru kontenerascale-down– obraz nigdy nie przekroczy rozmiaru kontenera, ale może być mniejszy
Warto też pamiętać, że object-fit działa zarówno z elementami img, jak i video.
Technika srcset i sizes
Kolejna technika, o której chcę Wam opowiedzieć, to srcset i sizes. Są one ściśle powiązane i pozwalają na dostarczanie różnych wersji obrazów, w zależności od urządzenia użytkownika.
Wyobraźcie sobie taką sytuację – macie na stronie duży baner, który wygląda świetnie na dużym monitorze, ale na smartfonie zajmuje pół ekranu. Zamiast stosować tu po prostu responsywne skalowanie, możecie dostarczyć mniejszą wersję obrazu dla mniejszych ekranów.
Oto jak to zrobić:
html
<img src="baner-1920.jpg"
srcset="baner-1920.jpg 1920w,
baner-1280.jpg 1280w,
baner-640.jpg 640w"
sizes="(max-width: 1024px) 100vw,
(max-width: 1920px) 50vw,
960px">
W atrybucie srcset określamy różne wersje obrazu, wraz z ich szerokościami w pikselach. Następnie w sizes definiujemy, która wersja ma być wyświetlana w zależności od szerokości ekranu użytkownika.
W tym przykładzie:
– Jeśli szerokość ekranu jest mniejsza lub równa 1024px, obraz zajmie 100% szerokości okna przeglądarki.
– Jeśli szerokość ekranu jest mniejsza lub równa 1920px, obraz zajmie 50% szerokości okna przeglądarki.
– Jeśli nic z powyższego nie zachodzi, obraz będzie miał stałą szerokość 960px.
To naprawdę potężne narzędzie, które pozwala na optymalizację obrazów pod kątem różnych urządzeń. Dzięki temu strona ładuje się szybciej, a użytkownicy widzą obrazy w odpowiedniej jakości.
Technika picture i source
Czasem srcset i sizes mogą okazać się niewystarczające. Może się zdarzyć, że chcemy dostarczyć nie tylko różne rozmiary obrazów, ale również różne formaty plików. To jest właśnie zadanie dla elementu picture i jego dziecka source.
Wyobraźcie sobie, że chcecie wyświetlić na stronie grafikę wektorową SVG, ale wiecie, że starsze przeglądarki mogą jej nie obsłużyć. W takiej sytuacji możecie dostarczyć obraz PNG jako alternatywę.
Oto przykład:
html
<picture>
<source srcset="obraz.svg" type="image/svg+xml">
<source srcset="obraz.webp" type="image/webp">
<img src="obraz.png" alt="Mój obraz">
</picture>
W tym przykładzie najpierw próbujemy dostarczyć obraz w formacie SVG. Jeśli przeglądarka go nie obsłuży, sprawdzamy obraz w formacie WebP. Jeśli i tego nie obsłuży, wyświetlamy obraz PNG jako ostateczną alternatywę.
Dzięki temu mamy pełną kontrolę nad tym, jakie formaty obrazów dostarczamy użytkownikom, w zależności od możliwości ich przeglądarek. To naprawdę potężne narzędzie, które pozwala nam na dostarczanie najlepszej jakości grafiki, niezależnie od urządzenia.
Technika object-position
Ostatnia z technik, o których chcę Wam opowiedzieć, to object-position. Jest ona ściśle powiązana z object-fit, ale daje nam jeszcze więcej kontroli nad tym, jak obraz jest wyświetlany.
Wyobraźcie sobie, że macie obraz grupowej fotografii, który ma być wyświetlany w małym elemencie na stronie. Bez object-position musielibyście albo rozciągnąć obraz, albo przyciąć go w taki sposób, że ludzie na zdjęciu byliby niewidoczni. Ale z object-position możemy zdecydować, która część obrazu ma być widoczna.
Oto przykład:
css
.image {
width: 200px;
height: 150px;
object-fit: cover;
object-position: 50% 30%;
}
W tym przykładzie ustawiamy object-fit: cover, co oznacza, że obraz wypełni cały kontener, zachowując proporcje. Następnie za pomocą object-position mówimy, że chcemy, aby centralny punkt obrazu był przesunięty o 50% w poziomie i 30% w pionie.
To naprawdę super narzędzie, które daje nam pełną kontrolę nad tym, co użytkownik widzi na ekranie. Możemy dostosować położenie obrazu, aby zawsze wyświetlać najistotniejsze elementy.
Podsumowanie
Jak widzicie, CSS oferuje nam całe mnóstwo technik, które pomagają w wyświetlaniu obrazów w sposób responsywny. Omówiliśmy:
object-fit– pozwala nam kontrolować, jak obraz ma się dopasować do kontenerasrcsetisizes– umożliwia dostarczanie różnych wersji obrazów, w zależności od urządzenia użytkownikapictureisource– daje nam pełną kontrolę nad dostarczaniem różnych formatów obrazówobject-position– pozwala na precyzyjne pozycjonowanie obrazu w kontenerze
Mam nadzieję, że te informacje okazały się dla Was przydatne. Jeśli chcecie dowiedzieć się więcej na temat tworzenia responsywnych stron internetowych, zapraszam do odwiedzenia strony stronyinternetowe.uk. Znajdziecie tam mnóstwo wartościowych informacji i porad.
Życzę Wam owocnej pracy nad Waszymi projektami! Trzymajcie się!
