Calculadora de relación de aspecto CSS y padding-top

Introduzca dimensiones positivas, como 16 y 9, y obtendrá una cadena porcentual lista para copiar. Resulta útil al mantener hojas de estilo antiguas, crear alternativas compatibles o generar contenedores para medios incrustados a partir de dimensiones guardadas. El cálculo es determinista, no conserva datos y ofrece el mismo resultado en el navegador y mediante la API.

Convierta dimensiones en espacio vertical responsivo

En CSS, el relleno vertical expresado como porcentaje se calcula respecto al ancho del bloque contenedor. Este comportamiento permite reservar altura antes de que se cargue una imagen, un vídeo, un iframe u otro contenido incrustado. La calculadora divide la altura indicada entre el ancho, multiplica el resultado por cien y añade el signo de porcentaje. Por ello, unas dimensiones panorámicas de 16 por 9 producen un valor que puede colocarse directamente en una declaración padding-top. Las dimensiones no tienen que estar en píxeles ni describir un recurso grande. Solo deben utilizar la misma unidad, ya que el resultado depende de la proporción. Un recurso de 1600 por 900, una miniatura de 160 por 90 y un marco de 16 por 9 reservan el mismo espacio relativo. Utilice números positivos y finitos en ambos campos; los valores ausentes, nulos, negativos o no numéricos se rechazan para evitar CSS engañoso o inutilizable.

Aplique el porcentaje como alternativa CSS

La cadena calculada está pensada para el patrón tradicional de caja de proporción intrínseca. Asigne el porcentaje al padding-top de un contenedor, establezca position: relative en él y coloque su elemento hijo de forma absoluta para que ocupe todo el espacio reservado. Así, el contenedor sigue el ancho disponible mientras el relleno vertical conserva la proporción solicitada. CSS moderno ofrece la propiedad aspect-ratio, normalmente más clara para código nuevo, pero las cajas basadas en relleno siguen siendo útiles en hojas antiguas, soluciones de compatibilidad, fragmentos generados y proyectos que ya han adoptado esta técnica. Interprete el valor devuelto como texto CSS, no como una proporción nueva. Si las dimensiones de origen son ancho 4 y alto 3, introdúzcalas en ese orden; invertirlas crea deliberadamente una caja vertical. La herramienta no examina imágenes ni deduce la orientación: realiza únicamente la conversión explícita y predecible.

Elija las dimensiones e interprete la precisión

Use el ancho y el alto intrínsecos para que el contenedor coincida con un recurso real, o dimensiones de diseño para reservar un espacio planificado. Se admiten valores grandes siempre que sean números positivos y finitos, aunque reducir ambos por el mismo factor no cambia el resultado. También se aceptan decimales, algo práctico cuando la proporción procede de medidas de maquetación y no de un tamaño multimedia entero. El resultado se presenta como una cadena porcentual compacta con precisión suficiente para el diseño CSS habitual. Los navegadores pueden redondear subpíxeles según el ancho de la ventana, por lo que un porcentaje matemáticamente preciso no garantiza que cada borde coincida con un píxel físico. Es un comportamiento normal del diseño, no un cambio de proporción. Cuando sea posible, declare aspect-ratio como regla principal y utilice este padding calculado solo como alternativa. Cada solicitud determinista mediante la API cuesta $0.002; el navegador realiza localmente el mismo cálculo puro.