¿Qué es la calculadora de relación de aspecto en CSS?
Esta herramienta convierte cualquier ancho y alto en píxeles en una relación de aspecto limpia y simplificada, como 16:9 o 4:3. También calcula el clásico porcentaje de padding-top que se usaba para mantener proporciones fijas en contenedores responsive (vídeos, iframes, envoltorios de imágenes) antes de que la propiedad CSS aspect-ratio tuviera soporte generalizado.
Cómo usarla
Introduce el ancho y el alto originales en píxeles. La calculadora reduce la proporción a su mínima expresión mediante el máximo común divisor (MCD), muestra el ratio decimal (ancho ÷ alto) y te da el porcentaje de padding-top que puedes copiar directamente en tu CSS.
La fórmula al detalle
Primero se calcula el MCD del ancho y el alto. Al dividir ambos números entre el MCD obtienes la proporción simplificada. Por ejemplo, 1920 y 1080 comparten un MCD de 120, así que la proporción queda en 16:9. El truco del padding-top emplea alto ÷ ancho × 100, ya que el padding en porcentaje se calcula respecto al ancho del elemento.
Ejemplo resuelto
Para una imagen de 1920×1080: MCD(1920, 1080) = 120. Proporción = \(1920/120 : 1080/120 = \mathbf{16:9}\). Decimal = \(1920 \div 1080 \approx 1{,}7778\). Padding-top = \(1080 \div 1920 \times 100 = \mathbf{56{,}25\,\%}\). Así, un contenedor responsive usaría padding-top: 56.25%.
Preguntas frecuentes
¿Por qué usar padding-top en lugar de la propiedad aspect-ratio? El truco del padding-top funciona en todos los navegadores, incluso en los muy antiguos. En proyectos modernos basta con usar aspect-ratio: 16 / 9;.
¿El porcentaje toma como base el ancho o el alto? En CSS, los porcentajes de padding vertical siempre se calculan respecto al ancho del bloque contenedor; por eso la fórmula es alto ÷ ancho.
¿Y si mis números no se reducen de forma limpia? Cualquier ancho y alto siguen produciendo una proporción válida; lo que ocurre es que quizá no coincida con un nombre habitual como 16:9. En esos casos, el ratio decimal resulta de gran ayuda.
