Calculadora de relación de aspecto
Introduce las medidas originales y modifica el ancho o alto de destino. Obtendrás dimensiones con la misma proporción y un fragmento CSS.
Se ejecuta localmente en tu navegador ·
16:9
Introduce las medidas originales y modifica el ancho o alto de destino. Obtendrás dimensiones con la misma proporción y un fragmento CSS.
Se ejecuta localmente en tu navegadorEntran dos medidas en píxeles y salen tres cosas: la relación reducida, un segundo tamaño con la misma proporción y una declaración CSS para el elemento que debe conservar la forma. Es aritmética con números: no se abre, se redimensiona ni se sube ninguna imagen.
Todos los campos se recalculan al escribir. El ancho y el alto de origen fijan la relación, y el campo de destino que toques recalcula el otro lado, así que la proporción se mantiene aunque escribas a medias.
La relación reducida divide las medidas de origen por su máximo común divisor: 1920 × 1080 queda en 16:9 y 1366 × 768 en 683:384, porque esos dos números no comparten un divisor menor. El tamaño proporcional es el par de destino redondeado a píxeles enteros. La relación decimal es ancho ÷ alto con seis decimales (1.777778 en 16:9). El relleno alternativo es alto ÷ ancho en porcentaje —56.2500 % para 16:9—, la cifra que necesita la técnica del padding porcentual.
Copiar CSS genera aspect-ratio: 16 / 9; para declarar la forma, width: 100%; para que el elemento ocupe su columna y una línea padding-top comentada como respaldo. Conserva la línea de padding si la misma hoja debe funcionar en un motor que ignore la propiedad aspect-ratio; borra el bloque de comentario si no es el caso. Como el fragmento usa el par reducido, una relación como 683:384 aparece tal como se calculó.
El par solo usa números enteros: una medida con decimales se redondea al entero más cercano antes de calcular el máximo común divisor, mientras que la relación decimal y el porcentaje de padding mantienen lo que escribiste. Los preajustes también se reducen, por eso 21:9 se muestra como 7:3, la misma proporción en su forma mínima. Las dos medidas de origen deben ser mayores que cero; si una está vacía, es cero o negativa, la línea de estado lo indica y el último resultado válido permanece en pantalla.
Porque toda relación se muestra en su forma irreducible: 21 y 9 se dividen entre 3, así que 21:9 queda en 7:3. La proporción no cambia: aspect-ratio: 7 / 3 calcula la misma caja que aspect-ratio: 21 / 9.
Cualquiera de los dos. Al editar el ancho se recalcula el alto y al editar el alto se recalcula el ancho, así que elige el lado que tu diseño realmente limita: una columna de ancho fijo o una altura fija como 600 px.
Se imprime como línea comentada, así que no estorba. aspect-ratio declara la forma en una sola propiedad y el padding porcentual es la técnica antigua que llega a motores que ignoran esa propiedad. Borra el bloque de comentario solo si todos tus navegadores objetivo la soportan.
Sí. El par reducido se calcula con los enteros redondeados —1920,5 × 1080,25 se muestra como 1921:1080—, mientras que la relación decimal (1.777829) y el porcentaje de padding usan los números sin redondear.
No. Solo calcula números y CSS; el archivo no se abre. Usa el redimensionador de imágenes cuando deban cambiar los píxeles y esta página para el contenedor que los muestra.