La relación de aspecto es la forma de una imagen o de una pantalla, expresada como ancho respecto a alto. Mantenerla al redimensionar es lo que evita que las fotos y los vídeos se vean estirados o aplastados.
Cómo funciona
La calculadora halla el máximo común divisor del ancho y el alto, el mayor número que divide a ambos exactamente, y divide los dos entre él. Para 1920 × 1080 ese número es 120, lo que da 16:9.
Para redimensionar sin distorsión, multiplica el nuevo ancho por el alto original y luego divide entre el ancho original.
Algunos tamaños no se reducen a una relación conocida. 1366 × 768, una pantalla de portátil habitual, es 683:384, que se acerca a 16:9 pero no es exacta.
Un ejemplo resuelto
1920 × 1080 tiene una relación de aspecto de 16:9, unos 1,7778 en decimal. Redimensionada a 1280 píxeles de ancho, debería tener 720 píxeles de alto para conservar la misma forma.
Más ejemplos
Una pantalla ultrapanorámica de 2560 × 1080 es en realidad 64:27 (2,37), no 21:9. Una imagen vertical de 1080 × 1350 es 4:5; redimensionada a 720 de ancho queda en 720 × 900.
Errores frecuentes
- Cambiar el ancho y el alto por separado, lo que distorsiona la imagen.
- Suponer que nombres comerciales como 21:9 son exactos.
- Ampliar imágenes pequeñas, lo que hace perder calidad.
- Colocar contenido importante cerca de bordes que las aplicaciones pueden recortar.
Preguntas frecuentes
¿Qué pasa si redimensiono una imagen a otra relación de aspecto?
Se estira o se aplasta, a menos que la recortes o añadas barras. Recortar a una relación más estrecha corta los lados, y el formato buzón mantiene la imagen entera con espacio vacío alrededor. En CSS son object-fit: cover y object-fit: contain.
¿Cuáles son las relaciones de aspecto más habituales?
16:9 para la mayoría de vídeos y pantallas, 4:3 para pantallas antiguas y muchas tabletas, 1:1 para publicaciones cuadradas en redes sociales, 9:16 para vídeo vertical de móvil y 3:2 para muchos sensores de cámara.
¿Cómo lo uso en CSS?
Copia el valor aspect-ratio de CSS, como 16 / 9, en la propiedad aspect-ratio. El navegador mantiene entonces el elemento con esa forma a medida que cambia su ancho.
¿Por qué la nueva altura sale con decimales?
Algunos anchos no se dividen de forma exacta en la relación. Redondea al píxel entero más cercano o elige un ancho que sea múltiplo del primer número de la relación, como un múltiplo de 16 para 16:9.
¿Qué relación de aspecto es 1920 × 1080?
16:9. Ambos números se dividen entre 120: 1920 ÷ 120 = 16 y 1080 ÷ 120 = 9. 1280 × 720 y 3840 × 2160 también son 16:9.
¿Cómo calculo una relación de aspecto?
Divide el ancho y el alto entre su máximo común divisor. Para 1200 × 800 el máximo común divisor es 400, así que la relación es 3:2.