Qué es Calculadora de relacion de aspecto?
Calculadora de relacion de aspecto es una herramienta de navegador para esta tarea: Calcula valores CSS aspect-ratio y fallbacks padding-bottom para evitar layout shift. La salida es fácil de revisar antes de usarla en un sitio publicado.
Quick answer
Calculate the CSS aspect-ratio value and padding-bottom fallback percentage to prevent Cumulative Layout Shift. Reserve the correct space for images, videos, and embeds before they load.
Limitations
- The padding-bottom fallback technique requires position: relative on the parent container and position: absolute on the child element for correct sizing behavior.
- Aspect-ratio only works when the element has a defined width. If the element width is auto or not set, the aspect-ratio calculation has no basis to compute the height.
Cómo usar esta herramienta
- Abre la herramienta y escribe los valores necesarios.
- Revisa la salida en el panel de resultado.
- Copia solo la parte que encaja con tu página.
- Prueba el cambio antes de publicar.
Para qué puedes usarla
- Resolver tareas repetidas de publicación con menos fricción.
- Preparar marcado, CSS o checklists antes del lanzamiento.
- Evitar pequeños errores comunes en sitios estáticos.