Calculadora de Aspect Ratio
Calculadora de relación de aspecto (aspect ratio) para vídeo, diseño y web. Calcula el ancho o el alto manteniendo la proporción, determina la relación de cualquier imagen, obtén el código CSS listo y comprueba las barras de letterbox. Gratis, sin registro.
Comunes
Redes sociales
Impresión y papel
Cine y vídeo
Ancho (px)
1920
Alto (px)
1080
Megapíxeles
2.07
Código listo para usar
Descargar guía PNG
Genera una imagen PNG en la relación exacta seleccionada, limpia y sin marcas. Útil como plantilla de encuadre o base de diseño. El lado más largo tiene 2048px.
Sobre esta herramienta
Calculadora de relación de aspecto (aspect ratio) online y gratuita para quienes trabajan con vídeo, diseño y desarrollo web. La herramienta resuelve la proporción entre una relación (16:9, 4:3, 1:1, 21:9 y decenas más) y los campos de ancho y alto: escribes una dimensión y la otra se calcula al instante, manteniendo la relación intacta. Además del cálculo, determina la relación de cualquier imagen que ya tengas, entrega el código CSS listo para pegar, muestra una vista previa que cambia de tamaño en tiempo real y calcula las barras de letterbox para saber cuánta barra negra queda al encajar un contenido dentro de un contenedor de relación distinta. Todo funciona en el navegador, sin registro.
Funcionalidades
Cómo funciona el cálculo de la relación de aspecto
La relación de aspecto es la proporción entre el ancho y el alto, escrita como dos números separados por dos puntos. En 16:9, por ejemplo, por cada 16 unidades de ancho hay 9 de alto. El cálculo es una proporción simple: el alto sale de ancho × (9 ÷ 16) y el ancho, de alto × (16 ÷ 9). Para determinar la relación de cualquier imagen, se dividen el ancho y el alto por el máximo común divisor entre ambos, lo que reduce, por ejemplo, 1920×1080 a su forma mínima 16:9. Es el mismo principio que la calculadora aplica para mantener cualquier redimensionado sin distorsión.
Casos de Uso
Los usos más comunes de la calculadora de relación de aspecto en el día a día de quienes producen contenido visual y código son:
- Edición y exportación de vídeoConvertir un máster 4K a HD, configurar resoluciones de salida y averiguar el alto correcto de un recorte panorámico sin deformar la imagen.
- Banners y diseño responsivoDefinir el alto de un banner a partir de un ancho fijo y generar el CSS aspect-ratio que mantiene la proporción en cualquier pantalla.
- Contenido para redes socialesAcertar con la Historia 9:16 (1080×1920px), el feed de Instagram 4:5 (1080×1350px) y la miniatura de YouTube 16:9 (1280×720px) antes de exportar, evitando recortes no deseados al publicar.
- Vídeo incrustado responsivoGenerar el patrón de iframe con padding proporcional para incrustar reproductores de vídeo que se adaptan al ancho del contenedor.
- Rendimiento y Core Web VitalsRellenar los atributos width y height de las imágenes para reservar espacio en el diseño y reducir el desplazamiento acumulado (CLS).
- Impresión y maquetaciónCalcular dimensiones proporcionales para A4, fotos y materiales impresos a partir de una medida conocida.
Cómo Usar
Elige la relación
Escribe los dos números de la relación o haz clic en uno de los ajustes organizados por contexto. La vista previa y el código se actualizan al instante.
Indica una dimensión
Rellena el ancho o el alto. El campo opuesto se calcula automáticamente manteniendo la relación elegida.
Copia el código
Usa los botones de copia para llevar el CSS aspect-ratio, los atributos de imagen o el iframe responsivo directamente a tu proyecto.
Comprueba el letterbox (opcional)
Activa el cálculo de barras, indica el tamaño del contenedor y mira cuánta barra negra queda al encajar el contenido.
Preguntas Frecuentes
El aspect ratio, o relación de aspecto, es la proporción entre el ancho y el alto de una imagen, vídeo o pantalla. Se escribe como dos números separados por dos puntos, como 16:9 o 4:3. El primer número representa el ancho proporcional y el segundo, el alto. Una relación 16:9 no indica el tamaño real en píxeles, solo que el ancho es siempre 16/9 veces el alto, ya sea en un vídeo de 1280×720 o de 3840×2160.
Basta con multiplicar el ancho por el alto de la relación y dividir por el ancho de la relación. Para un ancho de 1200px en 16:9, la cuenta es 1200 × 9 ÷ 16, que da 675px de alto. La calculadora lo hace automáticamente: eliges la relación, escribes el ancho y el alto aparece ya calculado. El camino inverso, hallar el ancho a partir del alto, sigue la misma lógica intercambiando los términos.
Son relaciones con formatos distintos. 4:3 es casi cuadrado, el estándar de las televisiones y monitores antiguos. 16:9 es el panorámico actual, usado en casi todo el vídeo online, la televisión y los móviles en horizontal. 21:9 es el ultrapanorámico, más alargado, común en monitores de productividad y en películas con un aire cinematográfico. Cuanto mayor es la diferencia entre los dos números, más alargada y panorámica resulta la imagen.
Son las barras negras que aparecen cuando un contenido se muestra en un espacio de relación distinta, sin recortar nada. El letterbox son las barras horizontales arriba y abajo, habituales al ver una película panorámica en una pantalla más cuadrada. El pillarbox son las barras verticales a los lados, que surgen al mostrar un vídeo más cuadrado en una pantalla panorámica. La calculadora indica exactamente cuántos píxeles de barra quedan en cada caso.
La propiedad aspect-ratio de CSS reserva el espacio de un elemento en la relación deseada sin necesidad de fijar el alto. Para un bloque 16:9, basta con escribir aspect-ratio: 16 / 9 y el navegador calcula el alto a partir del ancho disponible. Es la forma moderna de mantener proporciones responsivas y sustituye al antiguo truco del padding-bottom porcentual. La calculadora genera esta línea ya con los valores de la relación seleccionada.