Cómo usar la calculadora de relación de aspecto paso a paso
- Obtener ratio — introduce el ancho y el alto de tu imagen o vídeo para calcular su relación de aspecto simplificada. Ideal para identificar qué ratio tiene un archivo existente.
- Calcular alto — introduce el ancho que necesitas y el ratio objetivo (por ejemplo 16:9) para obtener el alto proporcional exacto.
- Calcular ancho — igual que el anterior pero partiendo del alto. Útil cuando tienes un espacio con altura fija y necesitas saber cuánto ancho usar.
- Escalar — introduce las dimensiones originales y el nuevo ancho para obtener el alto escalado manteniendo el ratio exacto. No necesitas conocer el ratio previamente.
- Usa un preset — haz clic en cualquiera de los ratios estándar para aplicarlo directamente en el calculador activo.
Ratios de aspecto estándar — Tabla de referencia por plataforma
Esta tabla recoge los ratios de aspecto más usados en diseño digital, vídeo y redes sociales con las resoluciones estándar para cada caso:
Vídeo y streaming
| Ratio | Resolución estándar | Nombre | Plataformas |
|---|---|---|---|
| 16:9 | 1920×1080 (Full HD) · 1280×720 (HD) | Widescreen | YouTube, Twitch, Netflix, TV |
| 9:16 | 1080×1920 | Vertical móvil | TikTok, Reels, Shorts, Stories |
| 21:9 | 2560×1080 · 3440×1440 | Ultra widescreen | Cine, monitores ultrawide |
| 4:3 | 1024×768 · 1280×960 | TV clásica | Proyectores antiguos, iPad |
Redes sociales e imágenes
| Ratio | Dimensiones px | Plataforma | Formato |
|---|---|---|---|
| 1:1 | 1080×1080 | Instagram, Facebook | Publicación cuadrada |
| 4:5 | 1080×1350 | Feed vertical — mayor engagement | |
| 1.91:1 | 1200×628 | Facebook, LinkedIn | OG image, posts horizontales |
| 2:3 | 1000×1500 | Pin estándar recomendado | |
| 3:2 | 1200×800 | Blogs, web | Fotografía DSLR estándar |
Aspect ratio en CSS — Cómo mantener proporciones en tu web
La propiedad aspect-ratio de CSS moderno
CSS moderno incluye la propiedad aspect-ratio que mantiene automáticamente las proporciones de cualquier elemento. Por ejemplo, aspect-ratio: 16 / 9 hace que el elemento siempre tenga ratio 16:9 independientemente del ancho del contenedor. Es compatible con todos los navegadores modernos. Si trabajas con gradientes de fondo, el generador de gradientes CSS te permite crear fondos que también se adaptan a cualquier ratio.
Técnica padding-top para contenedores responsivos
Para vídeos e iframes responsivos en proyectos que requieren compatibilidad con navegadores más antiguos, la técnica clásica usa padding-top: 56.25% (resultado de 9÷16×100) en un contenedor con position:relative y el elemento hijo con position:absolute; inset:0. El porcentaje de padding-top para cualquier ratio es: (alto ÷ ancho) × 100.
Preguntas frecuentes sobre relación de aspecto
La relación de aspecto es la proporción matemática entre el ancho y el alto de una imagen, vídeo o pantalla. Se expresa como dos números separados por dos puntos: 16:9 significa que por cada 16 unidades de ancho hay 9 de alto. Es independiente del tamaño absoluto — una imagen de 1920×1080 y otra de 1280×720 tienen exactamente la misma relación 16:9. Conocer el aspect ratio es esencial para escalar imágenes sin distorsión, adaptar contenido a diferentes plataformas y configurar resoluciones de vídeo. Verifica los estándares de aspect ratio en la especificación SMPTE y en la documentación técnica de cada plataforma.
Son el mismo ratio pero en orientaciones opuestas. 16:9 es horizontal (widescreen) — el formato estándar de televisión HD, YouTube y monitores de ordenador. 9:16 es vertical — el mismo ratio girado 90°, que es el estándar de móvil en pantalla completa. Es el formato de Instagram Stories, TikTok, YouTube Shorts y Reels. Un vídeo grabado en vertical con un móvil moderno tiene ratio 9:16. La resolución más común para 16:9 es 1920×1080 (Full HD) y para 9:16 es 1080×1920. Verifica las especificaciones técnicas de cada plataforma en sus centros de ayuda oficiales.
Para calcular el aspect ratio divide el ancho entre el máximo común divisor (MCD) de ancho y alto, y haz lo mismo con el alto. Por ejemplo, una imagen de 1920×1080: el MCD de 1920 y 1080 es 120. Dividiendo: 1920÷120=16 y 1080÷120=9, resultado: 16:9. Si la imagen no tiene un ratio estándar, puedes expresarlo como decimal dividiendo ancho entre alto: 1920÷1080=1.777, que se reconoce como 16:9. Esta calculadora hace este proceso automáticamente para cualquier par de dimensiones que introduzcas. Verifica la fórmula del MCD en recursos matemáticos como Khan Academy.
YouTube recomienda el ratio 16:9 para vídeos estándar — la resolución mínima recomendada es 1280×720 (720p HD) y la óptima para monetización es 1920×1080 (1080p Full HD). Para miniaturas (thumbnails) también 16:9 a 1280×720 con un tamaño máximo de 2MB. Para YouTube Shorts el ratio es 9:16 a 1080×1920. Si subes un vídeo con ratio diferente a 16:9, YouTube añade barras negras automáticamente (letterboxing). Los vídeos 4K usan 3840×2160, que mantiene el ratio 16:9. Verifica siempre las especificaciones actuales en support.google.com/youtube.
Instagram soporta varios ratios según el tipo de contenido: publicaciones cuadradas 1:1 (1080×1080px), publicaciones verticales 4:5 (1080×1350px) que son las que más espacio ocupan en el feed y generan más engagement, publicaciones horizontales 1.91:1 (1080×566px), y Stories y Reels a 9:16 (1080×1920px). Para portadas de Reels y miniaturas se usa el mismo 9:16. La foto de perfil es cuadrada 1:1 y se muestra como círculo de 110px en móvil. Puedes consultar todas las dimensiones exactas en la calculadora de tamaño de imagen para redes sociales de CreadorKit. Verifica en help.instagram.com.
En CSS moderno puedes usar la propiedad aspect-ratio: 16/9 directamente en el elemento — funciona en todos los navegadores modernos desde 2021. Para contenedores responsivos con vídeos o iframes, la técnica clásica es usar padding-top: 56.25% (que es 9÷16×100) en un div contenedor con position:relative y el elemento hijo con position:absolute y dimensiones al 100%. También puedes usar object-fit: contain o cover en imágenes con dimensiones fijas para que escalen sin distorsión. La propiedad aspect-ratio es la solución más limpia y moderna. Verifica la compatibilidad en caniuse.com/mdn-css_properties_aspect-ratio.
Para presentaciones modernas el estándar actual es 16:9 (widescreen) — es el ratio de todos los proyectores y pantallas de conferencia modernos, y el predeterminado en Google Slides, PowerPoint y Keynote. Para resolución, 1920×1080 es suficiente para la mayoría de casos; para presentaciones en pantallas 4K usa 3840×2160. El ratio 4:3 (1024×768 o 1280×960) es el formato antiguo que todavía se usa en algunos contextos académicos o con equipos de proyección más antiguos. Nunca uses resoluciones menores a 1280×720 en presentaciones porque el texto puede verse pixelado. Verifica en support.google.com/slides.
Las barras negras (letterboxing horizontal o pillarboxing vertical) aparecen cuando el ratio de tu vídeo no coincide con el que espera la plataforma. Para evitarlas, graba y edita siempre en el ratio nativo de la plataforma destino: 16:9 para YouTube y LinkedIn, 9:16 para TikTok y Stories, 1:1 o 4:5 para Instagram feed. Si tienes un vídeo en ratio incorrecto, recórtalo (crop) al ratio deseado antes de exportar — no lo estires porque distorsiona. La calculadora de relación de aspecto te dice las dimensiones exactas para recortar manteniendo el ratio correcto. Verifica los ratios en los centros de ayuda de cada plataforma.