Calculadora de relación de aspecto

¿Qué es una calculadora de relación de aspecto?

Una calculadora de relación de aspecto determina la relación proporcional entre el ancho y el alto de una forma rectangular. Las relaciones de aspecto se expresan como ancho:alto (como 16:9 o 4:3) y son esenciales para la producción de vídeo, la fotografía, el diseño web responsivo y el diseño impreso. Esta herramienta calcula la relación de aspecto a partir de las dimensiones en píxeles o escala las dimensiones para que coincidan con una proporción deseada.

Comprender las relaciones de aspecto evita que el contenido se vea estirado o recortado en distintas pantallas. Un vídeo 16:9 se ve perfecto en un televisor widescreen pero queda con bandas negras (letterbox) en una pantalla 4:3. Diseñadores y desarrolladores usan las relaciones de aspecto para crear diseños responsivos que mantienen las proporciones en distintos tamaños de pantalla.

Cómo usar esta herramienta

Introduce el ancho y el alto en píxeles para calcular la relación de aspecto. Alternativamente, introduce una proporción objetivo y una dimensión para calcular la otra. La herramienta reduce las proporciones a su forma más simple (1920x1080 se convierte en 16:9) y muestra preajustes comunes para una referencia rápida.

Cómo calcular una dimensión desconocida

Una relación de aspecto expresa la relación proporcional entre anchura y altura, independientemente del tamaño absoluto. La relación 16:9 significa que por cada 16 unidades de anchura hay 9 unidades de altura. Dado que la relación es independiente de la escala, una miniatura de 160×90 y una pantalla 4K de 3840×2160 comparten exactamente la misma relación de aspecto.

Para escalar dimensiones conservando la relación, usa estas dos fórmulas. Para obtener la nueva altura a partir de una nueva anchura: nueva altura = nueva anchura × (altura original ÷ anchura original). Para obtener la nueva anchura a partir de una nueva altura: nueva anchura = nueva altura × (anchura original ÷ altura original). Ambas fórmulas aplican simplemente la relación original como multiplicador.

Ejemplo práctico: escalar 1920×1080

Parte de un fotograma Full HD de 1920×1080 píxeles. Primero, simplifica la relación hallando el máximo común divisor (MCD) de 1920 y 1080. Usando el algoritmo de Euclides: MCD(1920, 1080) = MCD(1080, 840) = MCD(840, 240) = MCD(240, 120) = 120. Dividiendo ambas dimensiones entre 120 se obtiene 16:9, la conocida relación de pantalla panorámica.

Ahora supongamos que necesitas escalar ese vídeo a una anchura de 1280 píxeles para una pantalla más pequeña. Aplica la fórmula: nueva altura = 1280 × (1080 ÷ 1920) = 1280 × 0,5625 = 720. El fotograma escalado es 1280×720, también conocido como 720p HD, y sigue siendo exactamente 16:9.

Advertencia sobre redondeo: las dimensiones en píxeles deben ser números enteros. Redondea siempre al entero más cercano. Para la codificación de vídeo, redondea hacia abajo al número par más cercano para evitar errores de códec con el submuestreo de croma (por ejemplo, YUV 4:2:0 requiere dimensiones pares).

Relaciones de aspecto habituales y sus usos

• 16:9 — El estándar dominante para vídeo HD y 4K. Usado por YouTube, Netflix, Twitch, televisores modernos y la mayoría de monitores de escritorio. Resoluciones representativas: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD).
• 4:3 — El estándar heredado de televisores CRT y monitores de ordenador tempranos. Todavía se usa en presentaciones, algunos modelos de iPad y formatos de cine vintage. Un vídeo panorámico de 1920×1080 mostrado en una pantalla 4:3 genera barras negras horizontales (letterboxing).
• 1:1 — El formato cuadrado. Imprescindible para publicaciones en el feed de Instagram, fotos de perfil, iconos de aplicaciones y portadas de álbumes. Fácil de recortar desde cualquier formato más ancho sin perder el sujeto.
• 9:16 — La contraparte vertical del 16:9. El formato nativo de las pantallas de smartphones en orientación vertical. Usado por Instagram Stories, TikTok, YouTube Shorts y Snapchat.
• 21:9 — Formato ultraancho para cine y monitores. Común en películas cinematográficas (frecuentemente mostradas como 2,35:1 o 2,39:1) y monitores ultrawide para videojuegos. El contenido grabado en 16:9 genera barras negras verticales (pillarboxing) en una pantalla 21:9.
• 3:2 — La relación clásica del cine de 35 mm, trasladada a la mayoría de cámaras réflex digitales y sin espejo. Una impresión de 6×4 pulgadas es 3:2. Las resoluciones típicas incluyen 6000×4000 (24 MP) y 7952×5304 (42 MP).

Relaciones de aspecto comunes

• 16:9 — estándar widescreen para vídeo HD/4K, monitores modernos, YouTube, servicios de streaming.
• 4:3 — televisores y monitores tradicionales, iPad, diapositivas de presentación.
• 21:9 — monitores ultraanchos y contenido cinematográfico.
• 1:1 — formato cuadrado, publicaciones de Instagram, fotos de perfil.
• 9:16 — vídeo vertical para contenido móvil (Stories, TikTok, Shorts).

Letterboxing y pillarboxing: qué ocurre cuando las relaciones no coinciden

Cuando la relación de aspecto del contenido no coincide con la del contenedor, la pantalla debe compensarlo. El letterboxing añade barras negras horizontales en la parte superior e inferior; esto se aprecia al ver una película de cine a 2,39:1 en un televisor de 16:9. El pillarboxing añade barras negras verticales a la izquierda y a la derecha; se aprecia cuando una emisión en 4:3 se muestra en una pantalla panorámica de 16:9. Cuando aparecen ambos pares de barras (el contenido es más pequeño que el contenedor en ambas dimensiones), el efecto se denomina windowboxing.

La alternativa al boxing es recortar o estirar. Recortar rellena el contenedor pero corta parte de la imagen. Estirar rellena el contenedor pero distorsiona la imagen: los rostros y los círculos se convierten en óvalos. Ninguna opción es ideal, por lo que elegir la relación de salida correcta desde el principio evita problemas en la postproducción.

Errores comunes que conviene evitar

• Ignorar la relación al redimensionar: introducir una nueva anchura sin actualizar la altura produce contenido distorsionado y deformado. Bloquea siempre la relación de aspecto antes de redimensionar.
• Redondear ambas dimensiones de forma independiente: redondear la anchura hacia arriba y la altura hacia abajo (o viceversa) introduce una pequeña desviación de la relación que se acumula en redimensionados sucesivos. Redondea una dimensión y luego calcula la otra a partir del valor redondeado.
• Confundir la relación de visualización con la de almacenamiento: el vídeo anamórfico (común en emisiones y Blu-ray) almacena los píxeles con una relación pero indica al reproductor que los muestre con otra. Comprueba siempre los metadatos de la relación de aspecto de muestra (SAR), no solo las dimensiones del fotograma.
• Asumir que el 16:9 es universal: el diseño centrado en móviles a menudo requiere recursos en 9:16. Las plataformas sociales pueden recortar automáticamente a 4:5 o 1,91:1. Exporta varios recortes en lugar de depender de una sola relación.

Relaciones de aspecto en diseño web

En CSS, la propiedad aspect-ratio mantiene las proporciones en elementos responsivos. Antes de que existiera esta propiedad, los desarrolladores usaban el truco de padding-bottom (padding-bottom: 56.25 % para 16:9). El CSS moderno lo simplifica: define aspect-ratio: 16 / 9 en cualquier elemento. Esto es crucial para incrustar vídeos, crear galerías de imágenes y diseñar tarjetas que se vean coherentes en distintos dispositivos.

Preguntas frecuentes

¿Qué relación de aspecto tiene 1920x1080?

1920x1080 (Full HD) tiene una relación de aspecto de 16:9, que es el formato widescreen estándar. Otras resoluciones 16:9 comunes incluyen 2560x1440 (QHD), 3840x2160 (4K UHD) y 1280x720 (HD). La proporción 16:9 se convirtió en el estándar para contenido de alta definición porque ofrece un campo de visión más amplio que 4:3 siendo práctica para la mayoría de los tipos de contenido.

¿Cómo mantengo la relación de aspecto al redimensionar?

Bloquea la relación de aspecto en tu herramienta de edición (normalmente un icono de cadena entre los campos de ancho y alto). Cuando cambias una dimensión, la otra se ajusta proporcionalmente. Matemáticamente: nuevo alto = nuevo ancho / (ancho original / alto original). Por ejemplo, para redimensionar una imagen de 1920x1080 a 1280 de ancho: 1280 / (1920/1080) = 720.

¿Qué es el MCD y por qué importa?

El máximo común divisor (MCD) es el número más grande que divide tanto la anchura como la altura sin dejar resto. Dividir ambas dimensiones entre su MCD reduce la relación a su forma más simple. Por ejemplo, MCD(1280, 720) = 80; 1280 ÷ 80 = 16 y 720 ÷ 80 = 9, lo que da 16:9. Sin simplificación verías 1280:720 en lugar de la reconocible etiqueta 16:9.

¿Es 4:3 realmente lo mismo que 1,33:1?

Sí. Las relaciones de aspecto pueden expresarse como anchura:altura con números enteros (4:3) o como relación decimal (1,33:1, donde 4 ÷ 3 ≈ 1,333). El cine y la cinematografía utilizan tradicionalmente la forma decimal —1,85:1 (panorámico plano) y 2,39:1 (ámbito anamórfico)—, mientras que el vídeo y el diseño web prefieren la forma con dos puntos y números enteros. Esta calculadora muestra ambas: la relación simplificada (16:9) y el equivalente decimal (1,7778).