Na poprzedniej lekcji układaliście elementy obok siebie za pomocą flexbox. Dziś zajmujemy się obrazami: jak wstawić zdjęcie w tło elementu i jak dopasować <img> do ramki, która ma inny kształt niż samo zdjęcie.
background-image i background-size - obraz w tle, cover kontra contain
background-repeat i background-position - powtarzanie i ustawianie tła
object-fit - dopasowanie zdjęcia <img> do ramki o innych proporcjach
Rozgrzewka · 3 minuty
Trzy pytania z poprzedniej lekcji
Co robi display: flex na kontenerze i co się dzieje z jego bezpośrednimi dziećmi?
Czym różni się justify-content od align-items?
Do czego dziś służy float, skoro do kolumn obok siebie już się go nie używa?
Część 1 · background-image i background-size
Obraz w tle: cover kontra contain
background-image wstawia obraz w tło elementu, nie w znacznik <img>. background-size: cover wypełnia całe pudełko obrazem, obcinając nadmiar; contain mieści cały obraz w pudełku, zostawiając puste pasy, jeśli proporcje się nie zgadzają.
MDN: „background-image enables the display of an image in the background of an element” · „cover: the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. In this case, part of the image is likely to end up outside the box” · „contain: the browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders
Część 2 · background-repeat i background-position
Powtarzanie i ustawianie tła
background-repeat decyduje, czy mały obraz powtarza się jak kafelki: repeat (domyślnie, w obie strony), repeat-x (tylko w poziomie), repeat-y (tylko w pionie) albo no-repeat (bez powtarzania). background-position ustawia, w którym miejscu pudełka stoi obraz - punkt (0,0) to lewy górny róg pudełka, dalej liczymy w poziomie i w pionie słowami kluczowymi (top, center, bottom...) albo w procentach i pikselach.
Ciekawostka z MDN: oprócz repeat, repeat-x, repeat-y i no-repeat istnieją jeszcze dwie rzadziej używane wartości. round rozciąga kafelki, żeby zmieściła się cała ich liczba bez ucinania. space zostawia kafelki w oryginalnym rozmiarze i rozkłada między nimi równe odstępy, więc żaden się nie ucina.
MDN: „background-repeat property is used to control the tiling behavior of images” (repeat / repeat-x / repeat-y / no-repeat) · „background-position property allows you to choose the position in which the background image appears on the box... top-left-hand corner of the box is (0,0)” · „The default background-position value is (0,0)” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
Część 3 · object-fit
Dopasowanie zdjęcia do ramki: object-fit
object-fit dopasowuje <img> do jego własnych width/height, gdy różnią się od naturalnych - bez tego nie ma czego dopasowywać. Wartości: fill rozciąga (domyślnie), contain mieści cały obraz, cover wypełnia ramkę i obcina nadmiar, none zostawia naturalny rozmiar.
MDN: „If the img element is not resized, the image will be shown at its original (or intrinsic) size and aspect ratio, therefore object-fit will have no effect” · Web/CSS/object-fit: „fill: the entire object will completely fill the box... the object will be stretched” · „contain: the entire object is made to fill the box, while preserving its aspect ratio... letterboxed or pillarboxed” · „cover: sized to maintain its aspect ratio while filling the element's entire content box... clipped to fit” · „none: the replaced content is not resized” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Images_media_forms · developer.mozilla.org/docs/Web/CSS/object-fit
CSS · egzamin
Tak pytają na egzaminie
1. Kwadratowe zdjęcie 100×100 zmieniło się w okrągły awatar z zielonym tłem dookoła. Wskaż styl CSS, za pomocą którego uzyskano ten efekt.
border-radius: 10%;
border-radius: 50px;
border: 50% green;
shape: circle;
2. W definicji stylu background-image: url("drawing.gif"); background-repeat: repeat-y; powtarzanie dotyczy
tła każdego ze znaczników akapitu.
rysunku umieszczonego znacznikiem img.
rysunku umieszczonego w tle strony w pionie.
rysunku umieszczonego w tle strony w poziomie.
CKE, EE.09, styczeń 2025, zadanie 29 · CKE, E.14, czerwiec 2017, zadanie 6
Ćwiczenie · przy komputerze · 20 minut
Ćwiczenie: obrazy w tle i object-fit
Wybierz sekcję swojej witryny (np. nagłówek albo sekcję „o mnie”) i w style.css nadaj jej background-image wskazujący na obraz z internetu (adres URL) oraz background-size: cover.
Znajdź swoje zdjęcie profilowe (<img>). Nadaj mu w CSS kwadratową ramkę - jednakową width i height - i dodaj object-fit: cover, żeby zdjęcie wypełniło ramkę bez rozciągnięcia.
Zapisz, F5, sprawdź w przeglądarce. Commit „Obrazy w tle i object-fit”, Push.
Pamiętajcie:object-fit nic nie zmieni, jeśli obraz nie ma ustawionych width/height innych niż naturalne - to najczęstszy powód „nic się nie zmieniło”.
Pytania kontrolne
Trzy pytania na koniec
Czym różni się background-size: cover od contain?
Dlaczego object-fit nie zadziała, jeśli obrazek nie ma ustawionych innych wymiarów niż naturalne?
Jak ustawić obraz tła tak, żeby powtarzał się tylko w pionie?
To tyle na dziś: temat obrazów w CSS zamknięty. Na następnej lekcji: znaczniki sekcji HTML5.
Rozkład: CSS - Obrazy → Układ w HTML5 1/2
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Jeden plik background-image na wszystkie ekrany
Kilka rozmiarów obrazu i <picture>/srcset, żeby telefon nie ładował dużego pliku na próżno
nadal w użyciu (rozszerzone)
object-fit: cover do zdjęcia profilowego
Ten sam mechanizm w miniaturach galerii, kafelkach produktów, awatarach na portalach
nadal w użyciu
Ukryty <div> z background-image zamiast <img>, żeby „wyciąć” zdjęcie do ramki
object-fit (od stycznia 2020 „Baseline: Widely available” we wszystkich głównych przeglądarkach) załatwia to samo bez sztuczek
zastąpione
Stałe width/height w pikselach na zdjęciu
Jednostki względne (%, vw) + object-fit, żeby zdjęcie dopasowało się do różnych ekranów
nadal w użyciu
MDN: „object-fit... Baseline: Widely available... available across browsers since January 2020” · Internet Explorer nie wspiera object-fit w ogóle