Qué es Calculadora de relacion de aspecto?
Aspect-ratio es una propiedad CSS que establece una relación de aspecto preferida para un elemento, permitiendo que el navegador calcule la altura a partir del ancho antes de que el contenido se cargue. Esto previene el Cumulative Layout Shift (CLS), una métrica de Core Web Vitals que mide la estabilidad visual. Al reservar el espacio correcto para imágenes, videos e incrustaciones anticipadamente, el diseño de la página se mantiene estable mientras los recursos se cargan.
Respuesta rápida
Calcule el valor CSS aspect-ratio y el porcentaje de fallback padding-bottom para prevenir Cumulative Layout Shift. Reserve el espacio correcto para imágenes, videos e incrustaciones antes de que se carguen.
Last updated: 2026-06-11
Limitaciones
- La técnica de fallback padding-bottom requiere position: relative en el contenedor padre y position: absolute en el elemento hijo para un comportamiento de tamaño correcto.
- Aspect-ratio solo funciona cuando el elemento tiene un ancho definido. Si el ancho del elemento es auto o no está definido, el cálculo de aspect-ratio no tiene base para calcular la altura.
- Usar aspect-ratio sin un ancho o altura definido en imágenes puede causar Cumulative Layout Shift durante la carga de la página. Establezca siempre un atributo width o height en elementos img o una dimensión CSS explícita junto con aspect-ratio para que el navegador pueda reservar espacio antes de que la imagen se cargue.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Seleccione una relación de aspecto predefinida como 16:9, 4:3 o 1:1, o ingrese valores personalizados de ancho y alto.
- Vea el valor CSS aspect-ratio generado para navegadores modernos.
- Copie el fallback de padding-bottom para navegadores que no soportan la propiedad aspect-ratio.
- Aplique el marcado contenedor a su imagen o elemento incrustado. El marcador de posición reserva la altura correcta antes de que el recurso se cargue.
Para qué puedes usarla
- Reservar espacio para imágenes hero en publicaciones de blog para que el diseño no salte cuando la imagen se cargue.
- Crear contenedores estables para incrustaciones de video de YouTube o Vimeo que preserven la relación de aspecto del reproductor.
- Construir cajas de marcador de posición para imágenes con carga diferida en una cuadrícula de galería.