Proporcje obrazu
Utrzymywać spójne proporcje za pomocą aspect-square, aspect-video oraz niestandardowych wartości aspect-[w/h] dla obrazów i osadzonych treści.
Proporcje obrazu to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Problem proporcji obrazu
Zanim CSS otrzymał natywną właściwość aspect-ratio, zachowanie proporcjonalnych rozmiarów elementów wymagało osławionego triku z padding-top: ustawienia procentowego wewnętrznego odstępu w kontenerze o wysokości zero. Narzędzia Tailwind aspect-* korzystają zamiast tego z nowoczesnej właściwości CSS aspect-ratio, która jest przejrzysta, czytelna i obsługiwana we wszystkich nowoczesnych przeglądarkach. Rezultatem jest element, który zawsze zachowuje proporcje niezależnie od szerokości.
<!-- Without aspect ratio: fixed height -->
<div class="w-full h-48 bg-gray-200">Fixed height, distorts on resize</div>
<!-- With aspect ratio: proportional height -->
<div class="w-full aspect-video bg-gray-200">
Always 16:9, height follows width
</div>aspect-square
aspect-square wymusza, aby element zawsze był idealnym kwadratem — jego wysokość przez cały czas jest równa szerokości. Jest to idealne rozwiązanie dla obrazów awatarów, miniatur produktów, kontenerów ikon oraz każdego elementu, który musi być kwadratowy niezależnie od miejsca wyświetlania. Bez jawnie określonej szerokości element wypełnia element nadrzędny; za pomocą w-* można kontrolować jego rozmiar, a aspect-square automatycznie dopasowuje wysokość.
<!-- Square avatar, square card thumbnail, square icon -->
<div class="flex gap-4 items-start">
<!-- Square avatar -->
<div class="w-16 aspect-square bg-indigo-400 rounded-full flex items-center justify-center text-white font-bold">
AB
</div>
<!-- Square thumbnail -->
<div class="w-32 aspect-square bg-gradient-to-br from-pink-400 to-rose-600 rounded-lg"></div>
<!-- Square icon box -->
<div class="w-12 aspect-square bg-emerald-500 rounded-xl flex items-center justify-center text-white text-xl">
★
</div>
</div>aspect-video dla multimediów
aspect-video stosuje proporcje 16:9 — standardowy format panoramiczny używany przez YouTube, Vimeo i większość treści wideo. Należy stosować go do osadzonych filmów, kontenerów iframe oraz miniatur filmów, aby zapewnić ich prawidłowe skalowanie. Jest to szczególnie ważne w przypadku responsywnych elementów iframe, które nie skalują się naturalnie i tradycyjnie wymagały złożonych technik z kontenerami, aby zachować właściwe proporcje.
<!-- Responsive YouTube embed wrapper -->
<div class="w-full max-w-2xl mx-auto">
<div class="aspect-video w-full">
<iframe
class="w-full h-full rounded-lg"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allowfullscreen
></iframe>
</div>
</div>Niestandardowe proporcje obrazu
W przypadku proporcji, których nie obejmują wbudowane ustawienia, należy użyć składni dowolnych wartości Tailwind: aspect-[4/3] dla klasycznych proporcji fotograficznych, aspect-[3/2] dla fotografii krajobrazowej lub aspect-[9/16] dla pionowych filmów przeznaczonych na urządzenia mobilne. Licznik oznacza szerokość, a mianownik — wysokość. Silnik JIT kompiluje dokładnie określone proporcje bez potrzeby dodawania dodatkowego CSS.
<!-- Various custom aspect ratios -->
<div class="flex gap-4 flex-wrap">
<!-- 4:3 classic photo ratio -->
<div class="w-40 aspect-[4/3] bg-blue-200 rounded flex items-center justify-center text-sm">
4:3
</div>
<!-- 3:2 landscape photo -->
<div class="w-40 aspect-[3/2] bg-green-200 rounded flex items-center justify-center text-sm">
3:2
</div>
<!-- 9:16 portrait/story -->
<div class="w-24 aspect-[9/16] bg-rose-200 rounded flex items-center justify-center text-sm">
9:16
</div>
</div>Proporcje obrazu wraz z obrazami
W przypadku używania kontenerów z określonymi proporcjami dla obrazów należy ustawić dla obrazu w-full h-full object-cover, aby wypełniał kontener bez rozciągania i pozostawiania pustych miejsc. Narzędzie object-cover skaluje obraz tak, aby całkowicie pokrył kontener, przycinając krawędzie w razie potrzeby — działa dokładnie jak background-size: cover, ale w przypadku obrazów umieszczanych bezpośrednio w dokumencie.
<!-- Image card with consistent 16:9 thumbnail -->
<div class="max-w-xs rounded-xl overflow-hidden shadow">
<!-- Ratio container controls the aspect ratio -->
<div class="aspect-video">
<img
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400"
alt="Developer workspace"
class="w-full h-full object-cover"
/>
</div>
<div class="p-4 bg-white">
<h3 class="font-bold">Blog Post Title</h3>
<p class="text-sm text-gray-500 mt-1">Image always maintains 16:9 ratio.</p>
</div>
</div>Łączenie proporcji obrazu z układem siatki
Proporcje obrazu sprawdzają się doskonale w układach siatki, w których ważne są spójne proporcje wszystkich komórek. Proporcje należy ustawić na kontenerze, a nie na elemencie potomnym, i użyć object-cover na znajdujących się w nim obrazach. Każda komórka siatki ma wtedy takie same proporcje niezależnie od zawartości, co pozwala uzyskać jednolity układ kafelków spotykany w galeriach zdjęć, siatkach ikon aplikacji i katalogach multimediów streamingowych.
<!-- Photo gallery with uniform square tiles -->
<div class="grid grid-cols-3 gap-2">
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-blue-400 to-indigo-600"></div>
</div>
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-rose-400 to-pink-600"></div>
</div>
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-emerald-400 to-teal-600"></div>
</div>
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-amber-400 to-orange-600"></div>
</div>
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-purple-400 to-violet-600"></div>
</div>
<div class="aspect-square overflow-hidden rounded">
<div class="w-full h-full bg-gradient-to-br from-sky-400 to-cyan-600"></div>
</div>
</div>Proporcje obrazu dla osadzonych map
Mapy osadzane z Google Maps, Mapbox lub OpenStreetMap są elementami iframe, które zachowują się podobnie jak elementy iframe z filmami. Umieszczenie ich w kontenerze aspect-video lub aspect-[4/3] zapewnia responsywne skalowanie mapy. Sam element iframe otrzymuje class="w-full h-full", aby wypełnić kontener o określonych proporcjach. Dzięki temu mapa dopasowuje się do dowolnego układu bez ustalonej wysokości w pikselach.
<!-- Responsive map embed -->
<div class="rounded-xl overflow-hidden shadow-lg">
<div class="aspect-[4/3] w-full">
<iframe
class="w-full h-full"
src="https://www.google.com/maps/embed?pb=!1m18!..."
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>Proporcje obrazu i warianty object-fit
Chociaż najczęściej używa się object-cover, Tailwind oferuje także inne narzędzia object-fit współpracujące z kontenerami o określonych proporcjach. object-contain skaluje obraz tak, aby zmieścił się w granicach kontenera, zachowując cały obraz bez przycinania. object-fill rozciąga obraz, aby pokrył kontener, co może powodować zniekształcenia. object-none wyświetla obraz w jego naturalnym rozmiarze. Narzędzia object-position-* określają, która część obrazu pozostanie widoczna podczas przycinania z użyciem cover.
<!-- Comparing object-cover vs object-contain -->
<div class="flex gap-4">
<div>
<p class="text-sm text-center mb-1">object-cover (crops)</p>
<div class="aspect-square w-32 overflow-hidden rounded">
<img src="https://picsum.photos/200/300" class="w-full h-full object-cover" alt="Cover" />
</div>
</div>
<div>
<p class="text-sm text-center mb-1">object-contain (fits)</p>
<div class="aspect-square w-32 overflow-hidden rounded bg-gray-100">
<img src="https://picsum.photos/200/300" class="w-full h-full object-contain" alt="Contain" />
</div>
</div>
</div>Proporcje obrazu dla szkieletów ładowania
Kontenery o określonych proporcjach rozwiązują częsty problem UX: przesuwanie układu podczas ładowania obrazów. Umieszczenie obrazów w kontenerze o określonych proporcjach i kolorze tła rezerwuje miejsce jeszcze przed załadowaniem obrazu. Dodanie animate-pulse do kontenera tworzy efekt szkieletu ładowania, który zachowuje dokładne proporcje końcowego obrazu i zapobiega nagłym przeskokom po pojawieniu się zawartości.
<!-- Skeleton loaders with correct aspect ratios -->
<div class="grid grid-cols-2 gap-4 max-w-sm">
<div class="aspect-square bg-gray-200 animate-pulse rounded-lg"></div>
<div class="aspect-square bg-gray-200 animate-pulse rounded-lg"></div>
<div class="aspect-video col-span-2 bg-gray-200 animate-pulse rounded-lg"></div>
</div>Usuwanie proporcji obrazu
Aby usunąć proporcje obrazu ustawione dla niższego punktu przerwania, należy użyć aspect-auto. Resetuje ono właściwość aspect-ratio do wartości auto, pozwalając elementowi dopasować rozmiar naturalnie na podstawie zawartości. Wzorzec aspect-video md:aspect-auto stosuje proporcje wideo na urządzeniach mobilnych (co jest przydatne w przypadku banerów o pełnej szerokości), ale usuwa to ograniczenie na komputerach, gdzie dostępna jest większa przestrzeń.
<!-- Video ratio on mobile, auto on desktop -->
<div class="aspect-video md:aspect-auto md:h-96 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white">
<div class="text-center">
<h2 class="text-2xl font-bold">Hero Section</h2>
<p class="opacity-80 mt-2">16:9 on mobile, fixed 384px on desktop</p>
</div>
</div>Rzeczywista galeria kart z proporcjami obrazu
Oto kompletna galeria kart produktów wykorzystująca proporcje obrazu do zapewnienia spójnych miniatur. Zewnętrzna siatka udostępnia trzy kolumny, każda karta ma obszar obrazu aspect-video, a znajdująca się poniżej treść karty dopasowuje się elastycznie. Jest to dokładnie wzorzec używany w witrynach e-commerce, siatkach portfolio i panelach zarządzania treścią.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="aspect-video bg-gradient-to-br from-sky-400 to-blue-600"></div>
<div class="p-4">
<h3 class="font-bold text-gray-900">Product Name</h3>
<p class="text-sm text-gray-500 mt-1">Brief description of the item.</p>
<div class="flex items-center justify-between mt-3">
<span class="font-bold text-blue-600">$29.99</span>
<button class="text-sm bg-blue-500 text-white px-3 py-1 rounded">Add to cart</button>
</div>
</div>
</div>
</div>Szybkie sprawdzenie
Sprawdź swoje zrozumienie zagadnień Tailwind CSS Mastery z tej lekcji.
Podsumowanie lekcji
W tej lekcji poznali Państwo: aspect-square wymusza równą szerokość i wysokość, tworząc idealne kwadraty, aspect-video stosuje proporcje 16:9, idealne dla responsywnych elementów iframe i miniatur oraz aspect-[w/h] pozwala używać dowolnych proporcji za pomocą składni dowolnych wartości. W następnej części omówimy narzędzia do określania szerokości, koloru i stylu obramowania.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Proporcje obrazu” jest bezpłatna?
Tak — pełny tekst „Proporcje obrazu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Proporcje obrazu”?
Utrzymywać spójne proporcje za pomocą aspect-square, aspect-video oraz niestandardowych wartości aspect-[w/h] dla obrazów i osadzonych treści. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Proporcje obrazu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.