Generador de aspect-ratio CSS
Introduzca una anchura y una altura para obtener al instante el valor CSS aspect-ratio correspondiente, simplificado y con vista previa visual. El cálculo se realiza íntegramente en su navegador, no se envía nada a un servidor.
Cómo funciona
La propiedad CSS aspect-ratio permite conservar automáticamente las proporciones de un elemento (imagen, vídeo, contenedor) aunque cambie su anchura, sin recurrir a trucos de padding en porcentaje. Esta herramienta calcula la relación a partir de las dimensiones introducidas, la simplifica si es posible y muestra una vista previa del rectángulo obtenido.
¿Por qué usar aspect-ratio en lugar de una altura fija?
Una altura fija en píxeles rompe el diseño en una pantalla más estrecha o más ancha; aspect-ratio mantiene la proporción correcta entre anchura y altura sea cual sea el tamaño real del elemento, lo que resulta especialmente útil para vídeos adaptables, tarjetas de imagen o miniaturas de galería.
¿Qué significa la proporción simplificada que se muestra?
La herramienta reduce automáticamente su relación anchura/altura a su forma más simple (por ejemplo, 1920 / 1080 pasa a ser 16 / 9) mediante el máximo común divisor, lo que da un valor más legible y más fácil de reutilizar en su hoja de estilos.
Procesamiento 100% local: el cálculo y la vista previa se ejecutan únicamente en su navegador.