INF.03 · HTML i CSS

Stylowanie obrazów i efekty wizualne (cień, zaokrąglenia)

Zdjęcie dopasowane bez rozciągania.

Przewidź efekt
Zmień i sprawdź
Zbuduj samodzielnie

Po tej lekcji: Dobierzesz skalowanie i kadrowanie obrazu oraz zachowasz jego znaczenie i proporcje.

Zrozum, zanim zapiszesz

max-width: 100%; height: auto chroni proporcje obrazu o naturalnych wymiarach i pozwala go zmniejszać. Samo width:100% może powiększyć mały obraz do szerokości rodzica. Obraz jako element inline pozostawia miejsce na linię bazową; display:block usuwa tę szczelinę.

Jeśli narzucisz ramkę, np. width:100% i aspect-ratio:16/9, object-fit: cover wypełni ją z przycięciem, contain pokaże całość z wolną przestrzenią, a fill może zniekształcić proporcje. object-position wybiera położenie obrazu w ramce. Nie trzeba zawsze podawać jawnie obu width i height: ramkę może wyznaczać również aspect-ratio.

Podaj width i height odpowiadające proporcjom pliku, aby ograniczyć przeskoki układu. Obrazy poniżej pierwszego ekranu mogą mieć loading="lazy". Border-radius zaokrągla; overflow:hidden rodzica przycina potomków, ale może też obciąć cień i fokus. Efekt nie zastępuje dobrego alt.

Przygotuj HTML do tego przykładu

Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.

index.html — fragment bodyhtml

<figure><img class="plakat" src="obrazy/plakat.svg" alt="Rysunkowy plakat: góry i słońce" width="640" height="360"><figcaption>Autorski plakat do ćwiczeń</figcaption></figure>

Przykład do odtworzenia

style.csscss

img { max-width: 100%; height: auto; display: block; }
.plakat {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 30%;
  border-radius: .5rem;
  box-shadow: 0 .3rem 1rem rgb(0 0 0 / 20%);
}

Efekty bez zgadywania

Zapis	Działanie
`border-radius: 50%`	Koło dla kwadratowej ramki; inaczej elipsa
`box-shadow: 0 4px 12px rgb(0 0 0 / 20%)`	Przesunięcie X/Y, rozmycie i kolor
`filter: grayscale(100%)`	Odcienie szarości
`filter: brightness(.8)`	Przyciemnienie
`object-position: center 30%`	Położenie obrazu w ramce
`overflow: hidden`	Przycięcie zawartości poza obszarem

Sprawdź w działaniu

Kadrowanie: cover, contain czy fill?

Porównaj zdjęcie Spocka i plakat do ćwiczeń. Wybierz cover, contain lub fill, przesuń kadr i zmień promień rogów. Sprawdź, gdzie obraz jest przycinany, a gdzie zniekształcany.

Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.

Obraz do ćwiczeń

Pobierz autorską ilustrację „Plakat koła filmowego” przyciskiem w warsztacie. Utwórz folder obrazy obok index.html i zapisz w nim plakat.svg. Arkusz style.css trzymaj obok index.html. Ten sam plik posłuży w kolejnych lekcjach. Ilustracja jest materiałem własnym BitEdu do ćwiczeń.

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

Wstaw dwa razy ten sam obraz: raz w naturalnych proporcjach, drugi raz w ramce 16:9 z object-fit:cover. Dodaj opis alt, figcaption oraz width i height. Ustaw object-position tak, aby ważny fragment nie był ucięty.

Oczekiwany rezultat

Pierwszy obraz nie jest zniekształcony; drugi wypełnia ramkę przez kadrowanie, a podpis wyjaśnia treść.

Potrzebujesz pomocy? Rozwiązuj krok po kroku.

Krok 1 — pokaż podpowiedź

Naturalny obraz: max-width:100%, height:auto, display:block.

Krok 2 — pokaż podpowiedź

Ramka: width:100%, aspect-ratio:16/9 i object-fit:cover.

Krok 3 — pokaż podpowiedź

Przesuń object-position i porównaj z contain.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Sprawdź, zanim oddasz

Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.

Podsumowanie

Co warto zapamiętać

Dobierzesz skalowanie i kadrowanie obrazu oraz zachowasz jego znaczenie i proporcje.
Potrafisz wskazać w kodzie przyczynę widocznego efektu.
Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →

Źródła i dalsza nauka