En-Boy Oranı
Görseller ve gömülü içerikler için aspect-square, aspect-video ve özel aspect-[w/h] değerleriyle tutarlı oranları koruyun.
En-Boy Oranı, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
The Aspect Ratio Problem
Before CSS had a native aspect-ratio property, maintaining proportional element sizes required the infamous padding-top hack: setting a percentage padding on a zero-height container. Tailwind's aspect-* utilities use the modern aspect-ratio CSS property instead, which is clean, readable, and supported in all modern browsers. The result is an element that always maintains its proportions regardless of width.
<!-- 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 forces an element to always be a perfect square — its height equals its width at all times. This is ideal for avatar images, product thumbnails, icon containers, and any element that must be square regardless of where it appears. Without an explicit width, the element fills its parent; set w-* to control the size while aspect-square handles the height automatically.
<!-- 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 for Media
aspect-video applies a 16:9 ratio — the standard widescreen format used by YouTube, Vimeo, and most video content. Apply it to video embeds, iframe wrappers, and video thumbnails to ensure they resize correctly. This is particularly important for responsive iframes, which do not resize naturally and historically required complex wrapper techniques to stay in ratio.
<!-- 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>Custom Aspect Ratios
For ratios not covered by the built-in presets, use Tailwind's arbitrary value syntax: aspect-[4/3] for the classic photography ratio, aspect-[3/2] for landscape photography, or aspect-[9/16] for portrait/mobile video. The numerator is width and denominator is height. The JIT engine compiles exactly the ratio you specify with no extra CSS needed.
<!-- 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>Aspect Ratio With Images
When using aspect ratio containers for images, set the image to w-full h-full object-cover so it fills the ratio container without stretching or leaving gaps. The object-cover utility scales the image to cover the container completely, cropping the edges if necessary — exactly like background-size: cover but for inline images.
<!-- 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>Combining Aspect Ratio With Grid
Aspect ratios shine in grid layouts where consistent proportions across all cells matter. Set the ratio on the container, not the child, and use object-cover on images inside. Each grid cell then has the same proportions regardless of content, creating the uniform tile pattern seen in photo galleries, app icon grids, and streaming media catalogs.
<!-- 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>Aspect Ratio for Map Embeds
Map embeds from Google Maps, Mapbox, or OpenStreetMap are iframes that behave like video iframes. Wrapping them in an aspect-video or aspect-[4/3] container ensures the map scales responsively. The iframe itself gets class="w-full h-full" to fill the ratio container, giving a map that adapts to any layout without a fixed pixel height.
<!-- 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>Aspect Ratio and object-fit Variants
While object-cover is most common, Tailwind offers other object-fit utilities to go with aspect ratio containers. object-contain scales the image to fit within the bounds while preserving the full image without cropping. object-fill stretches to cover (distorts). object-none shows the image at its natural size. The object-position-* utilities control which part of the image is visible when cropping with 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>Aspect Ratio for Loading Skeletons
Aspect ratio containers solve a common UX problem: layout shift while images load. By wrapping images in a ratio container with a background color, the space is reserved before the image loads. Adding animate-pulse on the container creates a skeleton loading effect that maintains the exact proportions of the final image, preventing jarring jumps when content arrives.
<!-- 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>Removing Aspect Ratio
To remove an aspect ratio set at a lower breakpoint, use aspect-auto. This resets the aspect-ratio property to auto, letting the element size naturally based on its content. The pattern aspect-video md:aspect-auto uses a video ratio on mobile (useful for full-width banners) but releases the constraint on desktop where there is more space to work with.
<!-- 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>Real Card Gallery With Aspect Ratio
Here is a complete product card gallery using aspect ratio for consistent thumbnails. The outer grid provides three columns, each card has a aspect-video image area, and the card body below it has flexible content. This is the exact pattern used by e-commerce sites, portfolio grids, and content management dashboards.
<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>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: aspect-square forces equal width and height for perfect squares, aspect-video applies the 16:9 ratio ideal for responsive iframes and thumbnails, and aspect-[w/h] accepts any custom ratio using arbitrary value syntax. Next up we explore border width, color, and styling utilities.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“En-Boy Oranı” dersi ücretsiz mi?
Evet — “En-Boy Oranı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“En-Boy Oranı” dersinde ne öğreneceğim?
Görseller ve gömülü içerikler için aspect-square, aspect-video ve özel aspect-[w/h] değerleriyle tutarlı oranları koruyun. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“En-Boy Oranı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.