Łatwe dopasowywanie rozmiarów obrazków

Wykorzystaj możliwości CSS-a, żeby podkręcić obrazki na swojej stronie! Zobacz, jak mix-blend-mode pozwala uzyskać efektowne wizualnie rezultaty dzięki mieszaniu obrazków z tłem. Poznaj aspect-ratio, które utrzymuje proporcje obrazków i zapewnia spójny, responsywny układ. Sprawdź też object-fit, które pozwala kontrolować, jak obrazki wypełniają swoje kontenery - idealne do responsywnych layoutów. Poznaj te właściwości CSS i odmień wygląd swojej strony!

width: 20%; - Ustawia szerokość elementu na 20% szerokości rodzica, dzięki czemu element skaluje się responsywnie.
aspect-ratio: 3/2; - Utrzymuje stosunek szerokości do wysokości elementu na poziomie 3 do 2, więc element zachowuje kształt niezależnie od rozmiaru.
object-fit: contain; - Sprawia, że cała zawartość mieści się w swoim boksie bez zniekształcania proporcji, w razie potrzeby zostawiając puste pasy po bokach lub u góry i dołu.
mix-blend-mode: color-burn; - Miesza zawartość elementu z tłem, przyciemniając ją i zwiększając kontrast, co daje bardziej nasycone, intensywne kolory.

Pamiętaj, że użycie mix-blend-mode: color-burn; na obrazku może mocno zmienić jego wygląd w zależności od koloru tła. Ta właściwość CSS miesza obrazek z tłem, więc przy różnych kolorach tła barwy stają się ciemniejsze i bardziej intensywne. Stosuj ją ostrożnie, zwłaszcza jeśli zależy Ci na zachowaniu oryginalnych kolorów obrazka.

stylecss

img {
  width: 20%;
  aspect-ratio: 3/2;
  object-fit: contain;
  mix-blend-mode: color-burn;
}