Calculadora de relación de aspecto

Cómo usar la calculadora de relación de aspecto

1. Elige una de las Proporciones habituales (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) o escribe tus propios valores en Proporción o tamaño original. Puedes introducir una proporción (16 y 9) o las dimensiones reales de una imagen, un vídeo o una pantalla (1920 y 1080).
2. Consulta los resultados: la Proporción simplificada, la Proporción decimal (el ancho dividido entre el alto), la Orientación y el Estándar más cercano. El signo «≈» indica que tu tamaño se acerca a ese estándar, pero no coincide exactamente.
3. En Nuevo tamaño (mantiene la proporción), escribe un Nuevo ancho para obtener el alto correspondiente, o un Nuevo alto para obtener el ancho. La línea de debajo muestra el cálculo. Desmarca Redondear a píxeles enteros si necesitas el valor exacto, por ejemplo para tamaños de impresión en milímetros.
4. Intercambiar ancho y alto convierte una proporción horizontal en vertical (16:9 pasa a 9:16) y viceversa.
5. La Vista previa dibuja un rectángulo con tu proporción, y la tabla muestra el tamaño de cada proporción habitual con tu nuevo ancho.
6. Copia el Código CSS con Copiar.

Cómo se hace el cálculo

La relación de aspecto es el ancho dividido entre el alto, expresada con dos números enteros. Para simplificarla, la herramienta divide ambos lados entre su máximo común divisor (MCD): el MCD de 1920 y 1080 es 120, así que 1920:1080 = 16:9. Las entradas con decimales se multiplican primero por una potencia de diez (2,39:1 pasa a 239:100).

Para redimensionar sin perder la proporción basta una regla de tres:

• nuevo alto = nuevo ancho × alto original ÷ ancho original
• nuevo ancho = nuevo alto × ancho original ÷ alto original

Ejemplo: un vídeo 16:9 de 1280 px de ancho mide 1280 × 9 ÷ 16 = 720 px de alto.

Algunas pantallas tienen proporciones «raras». Un portátil de 1366 × 768 se simplifica a 683:384, es decir, 1,779:1, a un pelo de 16:9 (1,778:1); de ahí el «≈ 16:9». Los monitores que se venden como 21:9 son en realidad 64:27 (2560 × 1080) o 43:18 (3440 × 1440), por eso aparecen los dos en la tabla.

La propiedad CSS aspect-ratio

aspect-ratio: 16 / 9; le indica al navegador que calcule la dimensión que falta: con width: 100%, el alto se ajusta solo y la caja se escala con su contenedor. Funciona en todos los navegadores actuales (desde 2021) y es ideal para vídeos incrustados, tarjetas, marcadores de posición de imágenes y miniaturas. Combínala con object-fit: cover en las imágenes para recortarlas en lugar de estirarlas.

El código incluye además la antigua técnica del padding-top como alternativa: un padding en porcentaje se calcula a partir del ancho, así que padding-top: 56.25% (9 ÷ 16) reserva un área 16:9 y el contenido se posiciona de forma absoluta dentro. Solo la necesitas para navegadores muy antiguos.

Reservar el espacio con una proporción también evita saltos de diseño mientras cargan las imágenes y los vídeos, lo que mejora la métrica Cumulative Layout Shift (CLS).