Mantener la relación de aspecto de división según la altura

Mantener el ancho de un elemento como porcentaje de su altura puede ser un desafío. Si bien el uso de un valor porcentual para padding-top puede lograr el efecto opuesto, padding-left como porcentaje depende del ancho del objeto, no de su altura.

Para solucionar este problema, CSS introduce la propiedad de relación de aspecto, proporcionando una solución elegante para mantener una relación de aspecto constante basada en la altura. El siguiente fragmento de código demuestra su uso:

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

En este ejemplo, el elemento .box tiene una altura fluida del 50 % y una relación de aspecto de 2:1. Cuando la altura del contenedor cambia, la altura y el ancho del cuadro se ajustan en consecuencia, preservando su relación de aspecto.

La propiedad de relación de aspecto garantiza que el ancho del cuadro permanezca proporcional a su altura, independientemente del contenido del texto o del tamaño del contenedor. . Esto elimina la necesidad de soluciones JavaScript complejas y proporciona un enfoque limpio y eficiente solo CSS para mantener las proporciones.