Manter a proporção da divisão com base na altura

Manter a largura de um elemento como uma porcentagem de sua altura pode ser um desafio. Embora o uso de um valor percentual para padding-top possa obter o efeito oposto, padding-left como porcentagem depende da largura do objeto, não de sua altura.

Para resolver esse problema, o CSS introduz a propriedade de proporção de aspecto, fornecendo uma solução elegante para manter uma proporção consistente com base na altura. O trecho de código a seguir demonstra seu uso:

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

Neste exemplo, o elemento .box tem uma altura fluida de 50% e uma proporção de aspecto de 2:1. Quando a altura do contêiner muda, a altura e a largura da caixa são ajustadas de acordo, preservando sua proporção.

A propriedade de proporção garante que a largura da caixa permaneça proporcional à sua altura, independentemente do conteúdo do texto ou do tamanho do contêiner . Isso elimina a necessidade de soluções JavaScript complexas e fornece uma abordagem limpa e eficiente somente de CSS para manter proporções.