Qué es el aspect ratio
El aspect ratio (relación de aspecto) es la proporción entre el ancho y el alto de una imagen, video o contenedor. Se expresa como dos números separados por dos puntos: 16:9, 4:3, 1:1. Es uno de los conceptos más prácticos en diseño visual, video y desarrollo web.
Ratios más comunes
- 16:9: estándar de video moderno (YouTube, TV, monitores).
- 4:3: TV antigua, presentaciones de PowerPoint clásicas.
- 1:1: cuadrado. Instagram feed, Spotify covers, avatars.
- 9:16: vertical para stories, TikTok, Reels.
- 21:9: ultrawide cinematográfico.
- 3:2: cámaras DSLR y mirrorless.
- 2:3: posters y portadas verticales.
CSS aspect-ratio
La propiedad aspect-ratio de CSS permite mantener una proporción sin hacks. Antes había que usar el truco del padding-bottom: 56.25% para 16:9. Hoy es directamente:
.video {
aspect-ratio: 16 / 9;
width: 100%;
}Soporte total en Chrome, Firefox, Safari y Edge desde 2021. Cuando definís solo uno de los lados (típicamente width: 100%), el otro lado se calcula automáticamente.
Casos de uso
- Embeds de video: que el iframe mantenga el ratio correcto al hacer responsive.
- Imágenes responsive: evitar layout shift mientras carga la imagen.
- Cards: thumbnails de noticias, productos, posts con tamaño consistente.
- Galerías: grids donde todos los items tienen la misma proporción.
- Hero sections: control fino sobre las dimensiones del hero.
Layout shift y aspect-ratio
Si insertás una imagen sin definir width y height (o sin aspect-ratio), el browser no sabe cuánto espacio reservar mientras carga. Cuando termina de cargar, el contenido se mueve, generando layout shift (CLS, Cumulative Layout Shift). aspect-ratio resuelve esto: el browser reserva el espacio correcto desde el inicio.
Cuándo NO necesitás aspect-ratio
Si la imagen tiene atributos width y height en HTML (como debería tener), el browser ya calcula el aspect ratio implícitamente. La propiedad CSS es útil para componentes donde el HTML no tiene los atributos, o para iframes y otros embeds donde no hay dimensiones fijas.
Conversión rápida a porcentaje
Para el padding-bottom hack legacy: 16:9 = 56.25%, 4:3 = 75%, 1:1 = 100%, 9:16 = 177.78%, 21:9 = 42.86%. Útil si necesitás compatibilidad con navegadores muy viejos.