Calculadora de relación de aspecto CSS

La relación de aspecto describe la proporción entre el ancho y el alto de un elemento. Se escribe como dos números separados por dos puntos, por ejemplo 16:9, y no cambia al escalar ambas dimensiones por el mismo factor. Los desarrolladores web usan proporciones para reservar espacio estable para imágenes, videos, contenido incrustado, tarjetas y componentes adaptables antes de que terminen de cargar. Esta calculadora simplifica cualquier par de dimensiones enteras y genera la declaración CSS moderna correspondiente. La simplificación usa el máximo común divisor del ancho y el alto. Para 1920 por 1080, ese divisor es 120. Dividir ambas dimensiones entre 120 da 16 por 9. El valor decimal es el ancho dividido entre el alto, de modo que 16:9 equivale aproximadamente a 1.7778. CSS admite tanto los números simplificados como las dimensiones originales en aspect-ratio, pero los primeros son más fáciles de reconocer y revisar. La declaración generada puede pegarse en una regla para un contenedor de imagen, un marco de video, un elemento de cuadrícula u otra caja. La propiedad aspect-ratio define una proporción preferida. Si el ancho es definido y el alto automático, el navegador calcula el alto a partir de esa proporción. Si el alto es definido y el ancho automático, puede calcular el ancho. Cuando ambos están fijados explícitamente, la proporción no los sustituye. El contenido, los tamaños mínimos y máximos, el modelo de caja y las restricciones del diseño también pueden afectar a las dimensiones finales. Combinar width: 100% con una relación de aspecto es una forma habitual de crear contenedores multimedia adaptables. La relación de aspecto no es la resolución. Dos imágenes pueden ser 16:9 y tener cantidades de píxeles muy distintas, como 1280 por 720 y 3840 por 2160. La proporción controla la forma; la resolución influye en el detalle, el tamaño del archivo y la densidad de visualización. Recortar a una nueva proporción elimina contenido; encajar la imagen completa en una caja distinta puede dejar espacio vacío. Los valores de CSS object-fit, como cover y contain, determinan cómo se comporta el contenido reemplazado dentro de la caja reservada. Para evitar desplazamientos de diseño, usa las dimensiones intrínsecas del recurso original. Los atributos HTML width y height permiten inferir la proporción aunque el CSS adaptable cambie el tamaño mostrado. Si eliges imágenes por su composición o usas puntos de quiebre poco habituales, comprueba que cada fuente seleccionada tenga el encuadre previsto. La calculadora funciona con cualquier unidad común porque solo importa la proporción, pero pide enteros para que el máximo común divisor dé un resultado exacto, claro y predecible.