Cómo usar: Calculadora de relación de aspecto
- Introduce una proporción (o haz clic en una común como 16:9 o 9:16).
- Escribe un ancho para obtener el alto correspondiente, o un alto para obtener el ancho.
- Para averiguar la proporción de una imagen o pantalla existente, introduce su tamaño en Calcular la relación de un tamaño; haz clic en Usar esta relación para redimensionar con ella.
- Copia el CSS (
aspect-ratiomás el respaldo con padding-top) y elige un tamaño estándar de la tabla.
¿Qué es la relación de aspecto?
La relación de aspecto es la proporción entre el ancho y el alto, escrita como ancho:alto. Un video de 1920 × 1080 y uno de 1280 × 720 tienen tamaños distintos, pero comparten la misma relación 16:9, así que uno se escala al otro sin estirarse ni recortarse. Mantener la relación al redimensionar es lo que evita imágenes deformadas y las bandas negras.
Fórmulas de relación de aspecto
- Nuevo alto = nuevo ancho × alto de la proporción ÷ ancho de la proporción; por ejemplo, 1280 × 9 ÷ 16 = 720.
- Nuevo ancho = nuevo alto × ancho de la proporción ÷ alto de la proporción; por ejemplo, 1080 × 16 ÷ 9 = 1920.
- Simplificar un tamaño: divide ambos lados entre su máximo común divisor (MCD). 1920 y 1080 tienen un MCD de 120, lo que da 16:9.
Algunos tamaños no se simplifican de forma limpia: 1366 × 768 (una resolución común en portátiles) se simplifica a 683:384, que es aproximadamente 16:9. La calculadora muestra la proporción exacta y la relación común más cercana.
Relaciones de aspecto comunes y dónde se usan
| Relación | Decimal | Uso típico |
|---|---|---|
| 16:9 | 1.778 | Video HD/4K, YouTube, monitores, presentaciones |
| 9:16 | 0.5625 | Historias, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | TVs y monitores antiguos, iPad, muchas cámaras compactas |
| 3:2 | 1.5 | Película de 35 mm, fotos de DSLR y mirrorless, portátiles Surface |
| 1:1 | 1 | Publicaciones cuadradas en redes, avatares, miniaturas de producto |
| 4:5 | 0.8 | Publicaciones verticales en el feed de Instagram y Facebook |
| 21:9 | ≈ 2.33 | Monitores ultrapanorámicos, video cinematográfico |
| 1.91:1 | 1.91 | Imágenes de Open Graph / vista previa de enlaces (1200 × 630) |
Relación de aspecto en CSS
Los navegadores modernos admiten la propiedad aspect-ratio: aspect-ratio: 16 / 9; en un elemento con un ancho le da el alto correspondiente. Es ideal para incrustaciones de video responsivas, tarjetas y marcadores de imagen que evitan saltos de diseño (útil para el CLS de Core Web Vitals). La técnica anterior es el truco de padding-top: un contenedor con height: 0; padding-top: 56.25% (9 ÷ 16 × 100), porque los porcentajes de padding vertical se calculan respecto al ancho del elemento. Ambas se generan arriba. Para los archivos de imagen en sí, usa el Redimensionador de imágenes; para las vistas previas de enlaces, el Generador de imágenes OG crea imágenes de 1200 × 630.
También se busca como: calculadora 16:9, relación de aspecto, calculadora de proporciones, calculadora de resolución, relación de aspecto de imagen, relación de aspecto de video, aspect-ratio css, padding-top hack.
Herramientas que combinan con: Calculadora de relación de aspecto
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Convertidor PX a REM — Convierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa y convierte todos los valores px de una vez.
- Calculadora de porcentajes — Siete cálculos porcentuales cotidianos en una sola página.
- Convertidor de números romanos — Convierte cualquier número del 1 al 3 999 999 a números romanos —o convierte los números romanos en números arábigos— con una explicación detallada de cada símbolo.
Preguntas frecuentes
¿Cómo calculo el alto a partir del ancho y la relación de aspecto?
¿1920×1080 es 16:9?
¿Qué relación de aspecto tiene 1080×1350?
¿Cuál es el valor de padding-top para 16:9?
¿Debo usar aspect-ratio o el truco de padding en CSS?
aspect-ratio; lo admiten todos los navegadores actuales y no necesita contenedor adicional. Mantén el truco de padding solo si debes dar soporte a navegadores muy antiguos, como Safari anterior a la versión 15.