search

Found

info Descripción

Convierte cualquier proporción ancho:alto en el porcentaje de padding-top para cajas responsivas, con el fragmento heredado y una versión aspect-ratio.

📘 Cómo usar

  1. Elige una relación predefinida o escribe un valor personalizado de W y H
  2. Lee el porcentaje de padding-top y observa la vista previa
  3. Selecciona el fragmento heredado o la versión aspect-ratio según tu proyecto

Calculadora de padding CSS por proporción

W
:
H
16:9 — 56.25%

Valor de padding-top

56.25 %

CSS (truco padding-top)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS moderno (aspect-ratio)

.aspect-ratio-box {
  aspect-ratio: 16 / 9;
  width: 100%;
}
Copiado

grid_view Relacionados

Article

Calculadora de padding CSS por proporción | Porcentaje de padding-top desde cualquier relación

Introduce una proporción ancho:alto y obtén el porcentaje de padding-top que usa el truco clásico de caja responsiva. La herramienta muestra el fragmento heredado basado en position y una versión moderna con aspect-ratio, junto a una vista previa para confirmar la forma antes de copiar.

💡 Sobre esta herramienta

  • De la proporción al porcentaje: Convierte relaciones como 16:9 o 4:3 en un valor como padding-top: 56.25%. No hace falta calcular a mano alto ÷ ancho × 100.
  • Dos fragmentos en un solo lugar: Muestra el truco del padding-top (funciona en navegadores antiguos) y la propiedad aspect-ratio, más corta. Elige el que coincida con la compatibilidad de tu proyecto.
  • Vista previa de la forma: Un recuadro de vista previa representa las proporciones reales de la relación introducida, para verificar el resultado de un vistazo.
  • Seis presets: 16:9, 4:3, 1:1, 21:9, 3:2 y 9:16 están a un clic, cubriendo vídeos incrustados, miniaturas cuadradas, banners ultrapanorámicos y vídeo vertical.

🧐 Preguntas Frecuentes

Q. ¿Por qué el padding-top mantiene la proporción?

A. En CSS, el padding en porcentaje se calcula respecto al ancho del bloque contenedor, no a su alto. Por eso padding-top: 56.25% reserva una altura igual al 56,25% del ancho del elemento, y esa relación se mantiene aunque cambie el ancho. El truco del padding-top aprovecha justamente esa particularidad.

Q. Si existe aspect-ratio, ¿por qué conservar el truco antiguo?

A. La propiedad aspect-ratio resuelve el problema en una línea, pero no tiene efecto en navegadores antiguos. En intranets, dispositivos integrados o cualquier entorno con una matriz de navegadores limitada, el truco del padding-top sigue siendo la opción fiable. Compara ambos fragmentos y usa el que se ajuste a tus objetivos de compatibilidad.

Q. ¿Cómo ajusto un iframe o una imagen a la proporción?

A. Con el truco del padding-top, define la caja externa como position: relative y fija el hijo con position: absolute, top/left: 0 y width/height: 100%. El fragmento que genera esta herramienta ya incluye esa estructura, así que puedes colocar un iframe o un img directamente dentro.

Q. ¿Qué ocurre con proporciones que no dividen exactamente?

A. Una relación como 3:2 da un decimal periódico como 66,6666…%. La herramienta conserva solo los decimales necesarios, de modo que el error de redondeo es insignificante en la práctica.

📚 Datos Curiosos

El truco del padding-top se popularizó cuando Thierry Koblentz lo documentó como "Intrinsic Ratios in Web Design" en A List Apart en 2009. Cuando CSS aún no tenía una forma nativa de expresar una proporción, la técnica se apoyaba en un detalle poco conocido de la especificación —que el padding en porcentaje es relativo al ancho— y se convirtió en la manera canónica de lograr vídeos incrustados responsivos.

Más de una década después, los navegadores implementaron la propiedad nativa aspect-ratio, con soporte estable en los principales motores hacia 2021. Aun así, el truco no ha desaparecido: entender cómo funciona sigue siendo útil al leer código antiguo o al dar soporte a navegadores que van por detrás del estándar.