Calculadora de relación de aspecto
Introduce un ancho y un alto para reducirlos a una relación de aspecto simplificada (como 16:9 o 4:3) y una relación decimal, o cambia al modo de redimensionar para calcular la altura correspondiente a un nuevo ancho sin estirar ni comprimir la imagen.
Cómo funciona este cálculo
En el modo de proporción, la calculadora encuentra el máximo común divisor (MCD) del ancho y el alto y divide ambos por él, igual que al simplificar una fracción. 1920 × 1080 tienen un MCD de 120, así que al dividir ambos lados se obtiene 16:9. La relación decimal es simplemente ancho ÷ alto, útil para comparar relaciones que no se reducen a números enteros claros.
En el modo de redimensionar, la calculadora mantiene fija la relación original entre ancho y alto y calcula el lado que falta: nueva altura = altura original × (nuevo ancho ÷ ancho original). Como la relación entre ancho y alto nunca cambia, la imagen o el video redimensionado conserva sus proporciones originales y nunca se ve estirado ni comprimido.
Ambos modos funcionan con cualquier unidad coherente — píxeles para pantallas e imágenes, o centímetros y pulgadas para impresión — siempre que el ancho y el alto usen la misma unidad.
Ejemplo resuelto
Relaciones de aspecto comunes
Estas son las relaciones que encontrarás con más frecuencia en pantallas, fotos y video:
| Relación | Decimal | Uso típico |
|---|---|---|
| 1:1 | 1.0000 | Cuadrado — publicaciones de Instagram, portadas de álbum, fotos de perfil |
| 4:3 | 1.3333 | Televisión clásica, monitores antiguos, impresiones fotográficas estándar |
| 3:2 | 1.5000 | Sensores de cámaras réflex y sin espejo, impresiones 4x6 |
| 16:10 | 1.6000 | Algunos monitores de portátil y escritorio |
| 16:9 | 1.7778 | Video HD/4K, televisión panorámica, la mayoría de los monitores modernos |
| 21:9 | 2.3333 | Monitores ultrapanorámicos, video cinematográfico/anamórfico |
| 9:16 | 0.5625 | Video vertical — historias, reels, shorts |
Por qué mantener la misma relación de aspecto al redimensionar
Si cambias el ancho y el alto de forma independiente, la imagen o el video se estira o se comprime: los círculos se convierten en óvalos y las caras se ven distorsionadas. Mantener constante la relación ancho-alto al redimensionar (escalando ambos lados con el mismo factor) preserva exactamente las proporciones originales, por eso las herramientas de diseño y los editores de video suelen bloquear la relación de aspecto por defecto y solo permiten arrastrar un tirador.
Letterboxing y pillarboxing
- Letterboxing: franjas negras añadidas arriba y abajo del contenido para encajar una relación más ancha en una pantalla más alta sin recortar ni estirar (por ejemplo, una película en 21:9 mostrada en un televisor 16:9).
- Pillarboxing: franjas negras añadidas a la izquierda y la derecha para encajar una relación más alta en una pantalla más ancha (por ejemplo, imágenes antiguas en 4:3 mostradas en una pantalla 16:9).
- Recorte: en lugar de añadir franjas, algunos reproductores cortan los bordes del contenido para llenar la pantalla; esto evita las franjas, pero pierde parte del encuadre original.
- Estiramiento (no recomendado): forzar el contenido a llenar la pantalla sin conservar su relación distorsiona todas las formas de la imagen.
Usar relaciones en CSS y herramientas de diseño
El CSS moderno admite una propiedad aspect-ratio (por ejemplo, aspect-ratio: 16 / 9) que mantiene fijas las proporciones de un elemento a medida que su contenedor cambia de tamaño, útil para incrustaciones de video responsivas y marcadores de posición de imágenes que no deben provocar saltos de diseño mientras se cargan. Herramientas de diseño como Figma y Photoshop también permiten bloquear una relación al dibujar o escalar un marco, usando la misma relación ancho-alto que calcula esta herramienta.