Una vez envié un tema de WordPress donde todas las imágenes destacadas en el móvil parecían haber pasado por un mangle. Caras estiradas, logos aplastados. La causa fue de tres caracteres en un archivo CSS: un height: 240px Sentado al lado de un width: 100%. En un teléfono de 375 píxeles que producía una proporción de aproximadamente 1,56:1 y las imágenes eran 16:9 - 1,78:1. No hay una gran diferencia en el papel. Muy obvio en un rostro humano.
La relación de aspecto es una de esas cosas que se siente demasiado simple para equivocarse, por lo que nadie la verifica dos veces. Es una sola división. Y, sin embargo, arruina silenciosamente las exportaciones de video, las vistas previas de OpenGraph que se recortan en el lugar equivocado, las miniaturas con barras negras y las imágenes de héroe que se ven bien en su monitor de 27 pulgadas y terrible en un teléfono. Las matemáticas son triviales; el costo de un error de redondeo no lo es.
yo construyo Toolz.dev y hago este cálculo constantemente: dimensionar imágenes para un complemento & #39;s pantallas de administración, exportar video en formato Reels, descubrir qué debería ser realmente una imagen de OpenGraph. Entonces construí el Calculadora de relación de aspecto Para hacerlo en un campo y mostrar su funcionamiento. Dale una relación y una dimensión, te da la otra. Dale un tamaño, lo reduce a la proporción y te dice cómo se llama esa proporción.
TL;Dr: La relación de aspecto se divide por la altura, escrita como dos números con dos puntos. Para encontrar una altura faltante:
width × (ratioHeight ÷ ratioWidth). Para encontrar un ancho faltante:height × (ratioWidth ÷ ratioHeight). Para obtener la proporción de un tamaño, divida ambos números por su máximo común divisor: 1920 y 1080 comparten un MCD de 120, lo que da 16:9. El Calculadora de relación de aspecto ¿Los tres en su navegador, con presets para 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 y 2.39:1.
¿Qué es una relación de aspecto?
Una relación de aspecto es la relación proporcional entre el ancho de una imagen y el #39;s y su altura. Se escribe como dos números separados por dos puntos (16:9, 4:3, 1:1) y lo que describe es formular, no tamaño.
Esa distinción es todo el juego. 1280 × 720, 1920 × 1080 y 3840 × 2160 son tres resoluciones diferentes con una relación de aspecto. Tienen la misma forma en tres tamaños, por lo que cualquiera de ellos se escala en cualquier otro sin distorsión ni recorte. Mientras tanto, 1920 × 1080 y 1920 × 1200 tienen casi el mismo ancho, difieren en 120 píxeles de altura y son formas fundamentalmente diferentes: una es 16:9, la otra es 16:10, y poner el contenido diseñado para uno en un contenedor construido para el otro significa buzón o un cultivo.
La relación es solo ancho ÷ altura expresada como una fracción en términos más bajos. 1920 ÷ 1080 = 1.777…, y la fracción 1920/1080 se reduce a 16/9. Ambas son el mismo hecho que se indican de dos maneras: la forma decimal es más fácil de comparar (¿es 1.78 más ancho que 1.5? obviamente), y la forma de colon es más fácil de decir.
Los tres cálculos que realmente necesitas
Resolviendo una dimensión faltante
Ya conoces la forma y un lado. Este es el caso más común en la práctica: " Necesito una imagen de 16:9 y mi contenedor tiene 1280 píxeles de ancho, ¿qué altura?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
Y en la otra dirección:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
En la calculadora, elija un preset o escriba su relación, complete la dimensión que conoce, deje la otra en blanco y presione Calcular. Rellena el campo vacío y muestra la aritmética debajo.
Reduciendo un tamaño a su relación
Tienes un tamaño y quieres saber su forma, generalmente para verificar que dos activos coincidan o para descubrir qué es realmente la exportación de dimensiones misteriosas de un cliente.
El método es el mayor divisor común. Encuentre el número más grande que divide ambas dimensiones de manera uniforme y divide ambas por él. Para 1920 y 1080 ese número es 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Ratio 16:9.
Aquí es donde las respuestas se vuelven interesantes, porque los tamaños del mundo real a menudo lo hacen no reducir a una proporción favorable al marketing. Un monitor ultraancho de 3440 × 1440 se reduce a 43:18. Uno de 2560 × 1080 se reduce a 64:27. Ambos se venden como "21:9" y ninguno de los dos realmente es - 21:9 sería 3360 × 1440. La etiqueta es un redondeo del decimal (¦2.39:1 y «2.37:1) en algo que suena ordenado junto a 16:9. La calculadora le brinda la verdadera proporción reducida y el decimal, por lo que puede dimensionarlo a partir de la realidad en lugar de una hoja de especificaciones.
Escalado y ajuste
Dos variantes de la misma idea. decapado multiplica ambas dimensiones por el mismo factor, que por definición conserva la relación: una escala del 50% de 1920 × 1080 es 960 × 540, todavía 16:9. prueba Reduce un tamaño de fuente hasta que se encuentra dentro de un cuadro delimitador sin distorsión: tome el más pequeño de boxWidth ÷ sourceWidth y boxHeight ÷ sourceHeight Y escalar por eso. Una foto de 4000 × 3000 instalada en una caja de 1200 × 1200 se convierte en 1200 × 900. Esto es exactamente lo que CSS object-fit: contain lo hace, y exactamente lo que hace una imagen CDN cuando pides una redimension de dimensiones máximas.
Características clave de la calculadora de relación de aspecto
Diez presets, etiquetados con donde realmente se usan
16:9 para video estándar y la mayoría de las pantallas. 9:16 para carretes, pantalones cortos, tiktok e historias. 1:1 para puestos sociales cuadrados y avatares. 4:3 para pantallas antiguas y iPad. 3:2 para fotografía DSLR y película de 35 mm. 2:3 para impresiones de retratos. 5:4 para 8×10 impresiones. 21:9 para ultra ancho 1.91:1 Para imágenes de OpenGraph-Vista de imágenes 2.39:1 Para pantalla ancha anamórfica. Al pasar un preset le dice para qué sirve, lo que importa más que el número cuando está tratando de recordar qué quiere Instagram.
La fórmula debajo de cada respuesta
El panel de resultados muestra la aritmética exacta - 1280 × (9 ÷ 16) = 720. En parte para que puedas verificarlo, en parte para que puedas subirlo a una hoja de cálculo o un script. Si va a codificar una dimensión en un archivo CSS o una configuración de viento de cola, debería poder ver de dónde proviene el número.
La relación reducida, el decimal y el nombre
Cada resultado informa las tres representaciones: la relación entera reducida (16:9), su forma decimal (1.778:1) y un nombre común si tiene uno. Decimal es contra lo que comparas; el nombre es lo que escribes en un resumen de diseño.
Megapíxeles y recuento total de píxeles
Cada resultado incluye el recuento de píxeles en megapíxeles. Este es el número que realmente predice el uso de la memoria y el tamaño del archivo cuando cambias el tamaño de las imágenes: una foto de 4000 × 3000 es de 12 MP, y duplicar sus dimensiones lo cuadriplica a 48 MP, no lo duplica. Si estás generando conjuntos de imágenes responsivos, esa relación cuadrática es lo que debes mantener en tu cabeza. Cuando termines de dimensionar, Cambiar tamaño de imagen y comprimir imagen Realice el trabajo real, en el navegador.
Una vista previa de forma en vivo
Un rectángulo en el panel de resultados, dibujado según la proporción que acaba de calcular. Suena decorativo y no lo es: la forma más rápida de detectar que escribiste 9:16 cuando quisiste decir 16:9 es mirar una caja alta cuando esperabas una ancha.
lado del cliente, sin conexión, sin registro
Aritmética de JavaScript simple en su navegador. No se envía nada a ninguna parte, no se registra nada y la página sigue funcionando con la red apagada.
¿Qué relación de aspecto debo usar?
| proporción | decimal | donde se usa | Tamaño de píxel típico |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, vídeo HD/4K, la mayoría de los monitores, televisores | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0.563 | Carretes de Instagram, TikTok, Shorts de YouTube, Historias | 1080 × 1920 |
| 1:1 | 1.0 | Publicaciones de feeds de Instagram, avatares, miniaturas de productos | 1080 × 1080 |
| 4:5 | 0.8 | Publicación de Feed de retratos de Instagram (la mayor huella de alimentación) | 1080 × 1350 |
| 1.91:1 | 1.91 | Vistas previas de enlaces de tarjeta de OpenGraph / Twitter | 1200 × 630 |
| 4:3 | 1.333 | iPad, monitores antiguos, muchos sensores de cámara | 2048 × 1536 |
| 3:2 | 1.5 | DSLR y alambiques sin espejo, película de 35 mm, impresiones fotográficas | 6000 × 4000 |
| 21:9 (realmente ~2.37–2.39:1) | ~2.38 | Monitores ultra anchos, cultivos cinematográficos | 3440 × 1440 |
| 2.39:1 | 2.39 | Cine anamórfico de pantalla ancha | 4096 × 1716 |
Dos notas prácticas. El tamaño OpenGraph de 1200 × 630 se reduce a 40:21, un decimal de 1,905, lo suficientemente cerca de 1,91:1 como para que todos lo llamen así, y es el tamaño que Facebook, LinkedIn y X representan limpiamente. Verifique el resultado con el Abrir vista previa del gráfico Herramienta antes de enviarla, porque una imagen de vista previa mal recortada es el error más visible en un enlace que nadie hace clic. Y 4:5 vale la pena conocer en Instagram específicamente: ocupa más espacio vertical en el feed que 1:1, lo que es atención gratuita.
Casos de uso comunes
Dimensionar imágenes receptivas sin distorsión
Está creando una cuadrícula de tarjetas y el diseño requiere miniaturas de 16:9 a un ancho de contenedor de 384 píxeles. Calcular: 384 × 9 ÷ 16 = 216. Ahora tienes un tamaño concreto para tu CSS aspect-ratio: 16 / 9 declaración y exportación de su imagen, y están de acuerdo entre sí. El CSS moderno hace que esto sea más fácil de lo que solía ser - aspect-ratio en CSS toma la relación directamente y permite que el navegador haga la aritmética, pero aún necesita las dimensiones de píxeles para el activo en sí.
Exportación de vídeo para una plataforma específica
Disparaste 16:9 y necesitas un corte vertical de 9:16. La altura se mantiene en 1920, por lo que el ancho es 1920 × 9 itz 16 = 1080. Ese es el tamaño de exportación, y la razón por la que los números le resultan familiares es que 1080 × 1920 es simplemente 1920 × 1080 con los ejes intercambiados, que es lo que "vídeo vertical" significa.
Una cosa que la calculadora no hará por ti: H.264 requiere dimensiones uniformes. Si sus matemáticas llegan a un número impar, redondee el lado impar en un píxel o su codificador rechazará el trabajo.
Determinar qué es un activo misterioso en realidad
Un cliente envía activos a 1440 × 1800 y pregunta por qué recortan mal en la página de inicio. Reduzcalo: GCD de 1440 y 1800 es 360, dando 4:5. Las ranuras de su página de inicio son 16:9. Esas dos formas no pueden satisfacerse sin recortar; ahora tiene una respuesta concreta y una decisión que tomar, en lugar de una vaga sensación de que algo anda mal.
Comprobar que un conjunto de activos es consistente
Antes de un lanzamiento, ejecute las dimensiones de cada imagen de héroe a través del modo de relación. Si uno de los treinta regresa como 1.6:1 mientras que el resto son 1.778:1, ha encontrado el activo que se verá sutilmente incorrecto en el sitio en vivo, y lo ha encontrado antes de que un usuario lo haga.
Notas técnicas que vale la pena conocer
redondeo La mayoría de los cálculos de proporción no aterrizan en píxeles completos. 16:9 con un ancho de 1000 da una altura de 562,5. La calculadora redondea al píxel completo más cercano, por lo que obtienes 563, una forma que es 1,7762:1 en lugar de 1,7778:1, una diferencia de aproximadamente una décima parte del uno por ciento e invisible. No lo persigas. Note que se redondea constantemente hacia abajo A través de un conjunto de imágenes puede acumular una deriva visible si está apilando elementos; redondee de la dimensión de origen cada vez en lugar de del resultado anterior.
Relación de aspecto de píxeles frente a la relación de aspecto de la pantalla. En el vídeo transmitido, estos pueden diferir: las imágenes DV antiguas almacenaban 720 × 480 píxeles pero se mostraban en formato 4:3 haciendo que cada píxel no fuera cuadrado. Casi nada de lo que tocas hoy hace esto (todo son píxeles cuadrados), pero si estás trabajando con metraje heredado y las matemáticas se niegan a sumar, es por eso.
aspect-ratio en CS. Desde 2021 puedes escribir aspect-ratio: 16 / 9 Y deje que el navegador mantenga la forma mientras una dimensión es fluida. Úsalo. Elimina toda una clase de los hacks de porcentaje superior de relleno que solían ser necesarios, y significa que su diseño permanece correcto en anchos que nunca probó. Todavía desea la calculadora para la exportación de activos, porque el archivo de imagen tiene que ser una cantidad real de píxeles.
El recorte no es escalar. Si una proporción de origen y destino difiere, no puede cambiar el tamaño entre ellos: debe recortar, buzón o distorsionar. Elija deliberadamente. object-fit: cover cultivos (y generalmente es lo que quieres para las fotos), contain buzones (generalmente lo que quieres para logos) y fill Distorsiona (casi nunca lo que quieres, y la causa de mi error de cara desgarrada en la parte superior de este artículo).
preguntasrán el
¿Cómo calculo la relación de aspecto de ancho y alto?
Divida ambos números por su mayor divisor común. Para 1920 × 1080 el GCD es 120, por lo que la relación se reduce a 16:9. Cambie esta calculadora al modo de relación, ingrese ambas dimensiones y hace la reducción y nombra la relación para usted.
¿Qué altura necesito para una imagen de 16:9 a 1280 píxeles de ancho?
Multiplique el ancho por 9 y divida por 16: 1280 × 9 ÷ 16 = 720. Entonces, una imagen de 16:9 de 1280 píxeles de ancho tiene 720 píxeles de alto. Introduzca el preset 16:9 y un ancho de 1280 para confirmarlo.
¿Cuál es la diferencia entre la relación de aspecto y la resolución?
La relación de aspecto es la forma: la proporción entre ancho y alto. La resolución es el recuento real de píxeles. 1280 × 720 y 1920 × 1080 son resoluciones diferentes con la misma relación de aspecto 16:9, razón por la cual uno escala al otro sin distorsión ni recorte.
¿Qué relación de aspecto debo usar para las redes sociales?
Utilice 1:1 o 4:5 para publicaciones de Instagram, 9:16 para carretes, historias, TikTok y cortos de YouTube, 16:9 para videos estándar de YouTube y 1,91:1 para Gráfico abierto vincule imágenes de vista previa en Facebook, LinkedIn y X. Los ajustes preestablecidos en esta herramienta incluyen todos estos.
¿Por qué mi imagen redimensionada se ve estirada?
El nuevo ancho y alto no coinciden con la relación original, por lo que la imagen se aplasta a lo largo de un eje. Calcule la altura objetivo a partir del ancho objetivo usando la relación original en lugar de escribir ambos números a mano; para eso es exactamente el modo de resolución del lado perdido.
¿Qué significa realmente 21:9?
Es una etiqueta de marketing para pantallas ultra anchas. La verdadera relación de un monitor 3440 × 1440 es 43:18, aproximadamente 2,39:1, y un panel de 2560 × 1080 es 64:27. Ambos se redondean a "21:9" en los listados de productos. Si necesitas dimensiones exactas de píxeles, calcula a partir de la resolución del panel real en lugar de la etiqueta.
¿Cómo mantengo una relación de aspecto cuando el resultado no es un número entero?
La calculadora redondea al píxel completo más cercano, lo que introduce como máximo medio píxel de deriva, invisible en la práctica. Los codificadores de vídeo son más estrictos: H.264 requiere dimensiones pares, por lo que redondea el lado impar hacia abajo un píxel si un codificador rechaza su tamaño.
¿Esta calculadora funciona sin conexión?
Sí. Cada cálculo es una aritmética simple de JavaScript que se ejecuta en su navegador. No se envían dimensiones a un servidor, no se registra nada y la herramienta continúa funcionando sin conexión a Internet una vez que se ha cargado la página.
Herramientas relacionadas
- Cambiar tamaño de imagen- aplica las dimensiones que acabas de calcular, en el navegador
- comprimir imagen- encoja la lima una vez que la forma sea correcta
- Calculadora de porcentaje- para la escala por porcentaje de la mitad del trabajo
- Abrir vista previa del gráfico- verifique esa imagen 1.91:1 antes de enviar el enlace
- Convertidor de formato- webp y AVIF para los activos que acaba de dimensionar
Lectura adicional: La guía completa de compresión de imágenes y Herramientas de imagen esenciales para la web.
