Cómo usarla
- Para cambiar el tamaño, introduce la relación (por ejemplo, 16 y 9) o elige una habitual; después, escribe un ancho o un alto. Se calculará la otra medida.
- Para encontrar una relación, introduce el ancho y el alto de una imagen, pantalla o video.
- Consulta la vista previa y copia la regla aspect-ratio de CSS si la necesitas para un diseño web.
Cómo funciona
Para cambiar el tamaño proporcionalmente, se calcula alto = ancho × alto de la proporción ÷ ancho de la proporción (y a la inversa). Los tamaños en píxeles suelen ser números enteros, por lo que el resultado puede redondearse. Si una proporción no da un resultado exacto, como 16:9 con un ancho de 1000, la altura redondeada (563) es una aproximación cercana, no una coincidencia exacta.
Para simplificar un tamaño, se dividen ambos lados por su máximo común divisor: 1920 y 1080 son divisibles por 120, así que la proporción es 16:9. Algunos tamaños reales no se reducen a una proporción conocida. 1366×768 equivale exactamente a 683:384, muy cerca de 16:9; por eso, la herramienta también muestra la proporción común más cercana cuando la diferencia es inferior al 2 %. Del mismo modo, los monitores «21:9» en realidad tienen una proporción de 64:27 (2560×1080) o 43:18 (3440×1440): 21:9 es un nombre comercial.
En CSS, aspect-ratio: 16 / 9 hace que un elemento mantenga esa forma al cambiar su ancho. Es útil para insertar videos y crear marcadores de posición para imágenes que no desplacen el diseño mientras se cargan.
Ejemplos
Tamaño de miniatura de video
Una miniatura de video 16:9 que deba tener 1280 píxeles de ancho necesita una altura de 720 píxeles.
Identificar la proporción de una pantalla
2560×1600 se simplifica a 8:5, equivalente a 16:10, una proporción habitual en portátiles.
Recorte vertical para redes sociales
Con una proporción de 4:5 y un ancho de 1080, la altura es 1350: un formato vertical compatible con muchas plataformas.
Preguntas frecuentes
¿16:9 es lo mismo que 1,78:1?
Sí. 16 ÷ 9 ≈ 1,778, así que ambas expresiones describen la misma forma. Los formatos de cine suelen expresarse con decimales, como 2,39:1.
¿Por qué el resultado tiene decimales?
No todos los anchos se dividen exactamente según la relación. Activa el redondeo para obtener tamaños en píxeles; el resultado será el píxel entero más cercano y puede desviarse ligeramente de la relación exacta.
¿La propiedad aspect-ratio de CSS funciona en todas partes?
Es compatible con todos los navegadores principales actuales. Si un elemento también tiene definidos explícitamente el ancho y el alto, esos valores tienen prioridad sobre aspect-ratio.
Privacidad
Todos los cálculos se realizan en tu navegador. No se envía ni se almacena ningún dato.