Calculadora de relación de aspecto
Encuentra la relación de aspecto de una imagen o pantalla (16:9, 4:3…), calcula un nuevo tamaño sin deformar y obtén el código CSS aspect-ratio.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Encuentra el formato exacto de una imagen, un vídeo o una pantalla: relación simplificada (16:9, 4:3, 21:9…), relación habitual más cercana y valor decimal. Calcula un nuevo tamaño sin deformar, consulta las resoluciones habituales con la misma relación y copia el código CSS aspect-ratio, su versión antigua o Tailwind.
Cuándo usarla
Preparar un vídeo o una miniatura
YouTube espera 16:9, una historia 9:16, una publicación de Instagram 1:1 o 4:5: comprueba el formato antes de exportar.
Redimensionar una imagen en proporción
Quieres 1200 px de ancho: el alto correcto se calcula al instante.
Integrar un vídeo adaptable
aspect-ratio: 16 / 9 en un iframe de YouTube mantiene el formato correcto en cualquier ancho de pantalla.
Cómo se usa
- Introduce el ancho y el alto (o elige una relación).
- Consulta la relación simplificada y la relación habitual más cercana.
- Introduce un nuevo ancho o alto para obtener la otra dimensión.
Cómo funciona
La relación se simplifica con el algoritmo de Euclides (máximo común divisor). Luego se compara con las relaciones habituales: si la diferencia es menor del 2 %, se indica la relación habitual más cercana.
La nueva dimensión se redondea al píxel más cercano. El método antiguo (padding-top en porcentaje) se sigue ofreciendo para navegadores que no conocen aspect-ratio.
Consejos para un mejor resultado
- Prefiere dimensiones pares para vídeo: muchos codificadores las exigen.
- Para la web, una imagen de 1600 a 2000 px de ancho basta en la mayoría de casos.
- aspect-ratio evita saltos de maquetación al cargar: úsalo en todos los vídeos e imágenes integrados.
- Para cambiar la relación, recorta en lugar de estirar: una imagen deformada se nota enseguida.
Problemas frecuentes y soluciones
La relación parece rara (683:384)
El tamaño no coincide exactamente con una relación habitual; la herramienta indica entonces la más cercana.
Mi imagen se deforma al redimensionarla
El nuevo tamaño no tiene la misma relación: usa la dimensión calculada o recorta la imagen con «Redimensionar una imagen».
aspect-ratio no hace nada
Se ignora si se fijan a la vez el ancho y el alto. Deja el alto en auto.
Preguntas frecuentes
¿Cómo se calcula una relación?
El ancho y el alto se dividen por su máximo común divisor: 1920 × 1080 da 16:9. La herramienta lo hace sola.
¿Por qué 1366 × 768 da 683:384?
Esa resolución no es exactamente 16:9. La herramienta muestra la relación exacta y la habitual más cercana (unos 16:9).
¿Cómo redimensiono sin deformar?
Introduce el nuevo ancho: el alto se calcula para conservar la misma relación (y viceversa).
¿Para qué sirve aspect-ratio en CSS?
La propiedad reserva el espacio de un vídeo o una imagen antes de que carguen, sin cálculos ni trucos con padding: la página deja de saltar.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.