04.02.2025

Escalonando a Altura de um Div em CSS Proporcional à Sua Largura

Resposta Rápida

Para criar um div quadrado responsivo, você pode calcular a proporção em CSS usando a propriedade padding-top. Uma característica interessante deste método é que os margens são calculados com base na largura do elemento, mesmo que sejam verticais.

.quadrado {
  width: 50%; /* Define a largura como metade do elemento pai */
  height: 0;
  padding-top: 50%; /* É como olhar para um quadrado no Instagram */
  background: #f00; /* Um fundo vibrante que é difícil de ignorar */
}

<div class="quadrado"></div>

Este código retorna um quadrado perfeito, escalando com a largura de seu contêiner. Ao alterar padding-top, você pode alcançar outras proporções. Por exemplo, a proporção 16:9, típica de telas largas, pode ser obtida definindo 56.25%.

Combinando com o Elemento Pai: Uma Solução para Manter a Proporção

Para manter a proporção de um div com base em sua largura, use a propriedade padding-bottom para o elemento pai. Este método é conhecido como truque do padding-bottom ou padding-top.

.pai {
  position: relative;
  width: 25%; /* A porcentagem pode ser qualquer valor */
  padding-bottom: 25%; /* Idealmente, deve ser igual à largura */
}

.filho {
  position: absolute;
  width: 100%; /* Preenche todo o elemento pai */
  height: 100%; /* O elemento se adapta totalmente ao tamanho do elemento pai */
}

Tudo Sobre a Propriedade Aspect-Ratio

Com a nova propriedade aspect-ratio, a necessidade de controlar manualmente as proporções torna-se menos crucial. Essa propriedade permite que a altura se ajuste automaticamente à largura especificada.

.caixa-aspecto {
  width: 30%; /* Controle a largura do elemento */
  aspect-ratio: 1 / 2; /* O CSS calculará automaticamente a altura */
}

A Abordagem do ViewPort

Usando unidades de largura da viewport (vw), você pode configurar um div para manter uma proporção especificada ao redimensionar a viewport. Este método é apropriado para criar designs que ficarão atraentes em qualquer dispositivo.

.caixa-viewport {
  width: 30vw; /* Representa 30% da largura da viewport */
  height: 15vw; /* E não mais do que 15% da largura da viewport */
}

Sincronizando Proporções: Sobrepondo Conteúdo Enquanto Preserva a Proporção

Quando você precisa sobrepor conteúdo complexo em um div escalável, aplique posicionamento absoluto dentro de um contêiner com posição relativa para manter as proporções.

.conteiner {
  position: relative;
  width: 50%; /* Define a largura como metade do elemento pai */
  height: 0;
  padding-top: 56.25%; /* Preserva as proporções de tela larga */
}

.conteudo-interno {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Preencher o contêiner */
  height: 100%; /* Assim como sua altura */
}

Visualização

Imagine escalar um div como esticar um elástico para alcançar o tamanho de um cartão de crédito:

Dica: Preste atenção ao usar width: 100%; e padding-top: percentage%;

.meuDiv {
  width: 100%;       /* Estique para preencher toda a largura do espaço disponível */
  padding-top: 56.25%; /* Crie altura proporcional à sua largura */
}

Armadilhas do Escalonamento Proporcional

Lembre-se das potenciais limitações do contêiner pai - elas podem afetar o escalonamento. Verifique se algum elemento pai possui uma altura fixa ou se a propriedade overflow está definida como um valor não definido.

Exemplos de Escalonamento ao Vivo

Confira essas técnicas de escalonamento proporcional em ação em demonstrações no JSFiddle.

Tipografia Fluida

Combine a tipografia fluida com seu div usando a função calc() e unidades de viewport, o que garantirá um escalonamento harmonioso do texto.

.texto-fluido {
  font-size: calc(1vw + 1vh + 0.5vmin); /* O tamanho da fonte se adapta ao tamanho da janela */
}

Recursos Úteis

1. Caixas com Proporção | CSS-Tricks — Um guia detalhado sobre como criar caixas de proporção em CSS.
2. aspect-ratio - MDN Web Docs — Documentação oficial do MDN sobre a propriedade aspect-ratio em CSS.
3. Como Manter a Proporção de um Div com CSS — Um tutorial sobre como manter a proporção de elementos.
4. Criando Proporções Intrínsecas para Vídeo – A List Apart — Um artigo sobre como criar proporções intrínsecas para vídeos e outros objetos de mídia.
5. Design Responsivo: O Que É e Como Usá-lo — Smashing Magazine — Um artigo sobre os princípios do design responsivo na web, incluindo a manutenção de proporções.
6. Mantenha a proporção de um div com CSS - Stack Overflow — Uma discussão da comunidade com várias abordagens para preservar proporções em CSS.

Video

Navigation