Relación de aspecto
Mantenga proporciones coherentes con aspect-square, aspect-video y valores personalizados aspect-[w/h] para imágenes y contenido incrustado.
Relación de aspecto es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Relación de aspecto» es gratis?
Sí — el texto completo de «Relación de aspecto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Relación de aspecto»?
Mantenga proporciones coherentes con aspect-square, aspect-video y valores personalizados aspect-[w/h] para imágenes y contenido incrustado. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Relación de aspecto»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Utilidades de anchura
- Utilidades de altura
- Restricciones mínimas y máximas
- Relación de aspecto