Cómo se usa
- Hallar la relación: introduce el ancho y el alto para ver la relación de aspecto simplificada (p. ej., 16:9), la relación en decimal (p. ej., 1,78:1), la relación habitual más cercana y el máximo común divisor.
- Hallar el tamaño: introduce una relación y el lado que conoces (ancho o alto) para obtener el otro. Da igual la unidad —px, cm o cualquier otra— y el resultado sale en la misma unidad.
- Botones de relaciones habituales: pulsa un botón como 16:9, 4:3 o 21:9. En «Hallar la relación» se rellena una resolución de ejemplo; en «Hallar el tamaño», la relación.
- Debajo del resultado tienes una tabla de resoluciones habituales y un valor CSS de
aspect-ratiopara copiar. La vista previa aparece encima de los campos de entrada en móviles y a la derecha en escritorio.
Cómo se calcula la relación: máximo común divisor
Una relación de aspecto es el ancho y el alto divididos entre su máximo común divisor (MCD). El MCD se obtiene con el algoritmo de Euclides: divide el número mayor entre el menor, quédate con el resto y repite hasta que el resto sea 0. El último divisor es el MCD.
Con 1920 y 1080: 1920 ÷ 1080 deja 840, 1080 ÷ 840 deja 240, 840 ÷ 240 deja 120 y 240 ÷ 120 deja 0, así que el MCD es 120. 1920 ÷ 120 = 16 y 1080 ÷ 120 = 9, lo que da 16:9.
Si un valor tiene decimales, como 297 × 210,5, ambos números se multiplican por una potencia de 10 para convertirlos en enteros antes de simplificar. Cuando una relación sigue teniendo números grandes después de simplificarla, la herramienta muestra también la relación habitual más cercana y cuánto se desvía.
Calcular un tamaño y resultados que no son enteros
El otro lado sale de una proporción sencilla. Con 16:9 y un ancho de 1280, el alto es 1280 × 9 ÷ 16 = 720.
Si el tamaño tiene que ser entero, como con los píxeles, el resultado puede tener decimales. Con una relación simplificada de 16:9 y un ancho entero, el alto solo es entero cuando el ancho es múltiplo de 16. La herramienta muestra el resultado redondeado y, si no es entero, también el valor antes de redondear. Si la longitud introducida es entera, indica además tamaños enteros cercanos que mantienen la misma relación. Por ejemplo, con un ancho de 1000 el alto es 562,5, y los tamaños cercanos son 992 × 558 y 1008 × 567. Para unidades como cm, usa el valor antes de redondear.
Relaciones habituales en vídeo, fotos y redes sociales
- 16:9: la pantalla horizontal estándar de televisores, monitores y vídeo en línea. 1920 × 1080 del estándar HDTV (ITU-R BT.709) y 3840 × 2160 del estándar UHDTV (ITU-R BT.2020) son ambos 16:9.
- 9:16: 16:9 en vertical, habitual en vídeos verticales. Según la relación de la pantalla del móvil, pueden aparecer márgenes o recortarse parte del vídeo.
- 4:3 y 3:4: 4:3 es la relación de televisores y monitores antiguos y también es habitual en fotos. 3:4 es su versión vertical.
- 3:2 y 2:3: una relación habitual en las fotos hechas con cámara.
- 1:1: un cuadrado, para imágenes con el mismo ancho y alto, como fotos de perfil y miniaturas.
- 4:5: una relación de foto algo vertical que ocupa más espacio en altura que 1:1.
- 16:10: se usa en portátiles y monitores, un poco más alta que 16:9.
- 21:9 y 32:9: pantallas muy anchas, como los monitores ultrapanorámicos.
Los tamaños recomendados en redes sociales y plataformas de vídeo cambian según el servicio y se actualizan a menudo, así que consulta la ayuda oficial de cada servicio antes de subir tu contenido.
Usarla en CSS aspect-ratio
Si indicas una relación en la propiedad CSS aspect-ratio y fijas el ancho, el alto se calcula a partir de la relación cuando es automático (height: auto). Si el ancho y el alto están fijados, esta propiedad no ajusta las dimensiones. Escribe el valor como ancho / alto, por ejemplo aspect-ratio: 16 / 9;, o como un solo número (aspect-ratio: 1.5;). Esta herramienta te da el valor como dos enteros simplificados, así que puedes copiarlo tal cual. Reservar espacio para un vídeo o una miniatura puede reducir los desplazamientos del diseño cuando una imagen carga tarde.