Calculadora de relación de aspecto
Simplifica un tamaño a su proporción, resuelve el ancho o alto que falta o encaja una proporción en un contenedor, con CSS incluido.
La Calculadora de relación de aspecto funciona por completo en tu navegador. Las dimensiones se procesan en tu dispositivo y nunca se suben.
Abrir la Calculadora de clamp() CSS
Acerca de Calculadora de relación de aspecto
Calculadora de relación de aspecto trabaja en las tres direcciones en que llega el problema. Dale un ancho y un alto y simplifica la proporción por máximo común divisor — y, lo importante, reconoce los casi-aciertos: 1366×768 se reduce al inútil 683:384, pero la calculadora también lo declara «efectivamente 16:9», que es la respuesta que buscabas. Dale una proporción y una dimensión y resuelve la otra en píxeles enteros. Dale una proporción y un contenedor y devuelve el mayor encaje interior. En todos los casos obtienes los tamaños estándar de esa proporción (de 1280×720 a 3840×2160 para 16:9) y CSS listo para copiar: la propiedad aspect-ratio moderna más el porcentaje padding-top del patrón clásico.
Características
- Dimensiones → proporción exacta y proporción común más cercana
- Proporción + una dimensión → la otra, en píxeles enteros
- Proporción + contenedor → el mayor encaje interior
- Preajustes de 16:9 a 2,39:1 anamórfico
- Lista de tamaños estándar con alturas pares garantizadas
- Propiedad CSS aspect-ratio y porcentaje del truco de padding
Cómo usar Calculadora de relación de aspecto
- Elige la dirección: tamaño → proporción, dimensión faltante o encaje
- Introduce lo que sabes
- Lee el resultado y los tamaños estándar de esa proporción
- Copia el CSS si va a una maqueta
Ejemplo
Entrada
16:9, width 1000
Salida
Height 563 px · CSS: aspect-ratio: 16 / 9; · padding hack 56.25%
El 56,25 % es 9÷16: el número clásico del vídeo adaptable.
Errores comunes y solución de problemas
- 1366×768 se simplifica a 683:384 y no a 16:9. — 683:384 es la respuesta exacta: esa resolución genuinamente no es 16:9. La línea «efectivamente 16:9» da la respuesta práctica; se muestran ambas porque ambas son verdad.
- La dimensión resuelta es impar y un codificador de vídeo la rechaza. — H.264 y compañía exigen dimensiones pares. Usa la lista de tamaños estándar, que redondea las alturas a pares, o mueve la entrada un píxel.
- Un vídeo 4:3 en un reproductor 16:9 muestra bandas negras. — Es el comportamiento correcto: encajar 4:3 en 16:9 deja bandas laterales. Quitarlas implica recortar contenido.
Preguntas frecuentes
- ¿Qué resolución es 16:9 para un ancho dado?
- Multiplica el ancho por 9/16: 1280→720, 1920→1080, 2560→1440, 3840→2160. La calculadora lo resuelve para cualquier ancho o alto.
- ¿Cómo mantengo la proporción de un elemento en CSS?
- La forma moderna es una línea: aspect-ratio: 16 / 9. El patrón heredado da al contenedor un padding-top del 56,25 % y posiciona el contenido en absoluto dentro. La calculadora emite ambos.
- ¿Por qué los monitores anuncian 16:9 cuando los píxeles dicen otra cosa?
- Paneles como 1366×768 aproximan 16:9 con un error inferior al uno por ciento, suficiente para el marketing y el vídeo a pantalla completa. La calculadora muestra la proporción exacta y la nombrada más cercana.
- ¿Qué proporciones piden las plataformas sociales?
- El vídeo de feed tiende a 1:1 o 4:5, las historias y shorts son 9:16, las subidas horizontales 16:9 y el metraje cinematográfico 21:9 o 2,39:1.
Herramientas relacionadas
Todas las herramientas de ArrayKit