20.12.2024

Redimensionando um Div enquanto Mantém a Proporção: Uma Solução em CSS

Resposta Rápida

Para garantir que um elemento div mantenha suas proporções quando a janela for redimensionada, aplique a propriedade aspect-ratio junto com uma largura relativa. Por exemplo:

.div-ratio {
  width: 100%; /* Largura flexível para qualquer dispositivo */
  aspect-ratio: 16 / 9; /* Proporção semelhante às telas — 16:9 */
}

<div class="div-ratio"></div>

Isso manterá a proporção de 16:9, típica para displays widescreen, independentemente do tamanho do viewport.

Truque do Padding-Top para Manter Proporções

Você pode já ter encontrado o método de usar padding-top para manter as proporções. Veja como isso funciona:

.aspect-ratio-box {
  position: relative;
  width: 100%; /* Largura total para apresentação visual ideal */
  padding-top: 56.25%; /* Altura dividida pela largura (9 / 16 = 0.5625) para manter a proporção de 16:9 */
}

.aspect-ratio-box > .content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* Preencher toda a área do bloco pai */
}

<div class="aspect-ratio-box">
  <div class="content">Seu conteúdo está ótimo, proporções mantidas!</div>
</div>

Usar o método padding-top permite que a proporção especificada seja preservada com base na largura do contêiner.

Propriedade de Display e a Magia dos Pseudo-elementos

Se você prefere usar os navegadores mais recentes, pode utilizar o pseudo-elemento ::before com a propriedade display para manter as proporções sem especificar uma altura explícita:

.ratio-container::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* A mágica de manter a proporção de 16:9 */
}

.ratio-container > .content {
  position: absolute;
  top: 0;
  width: 100%; height: 100%; /* Ocupando toda a área do bloco pai */
}

O pseudo-elemento ::before cria uma camada “invisível” que serve como base para as proporções, enquanto o conteúdo preenche a área especificada devido ao posicionamento absoluto.

Usando Unidades de Viewport

As unidades de viewport — vw e vh — são uma verdadeira salvação para alcançar tamanhos de texto e elementos realmente responsivos. Elas se adaptam perfeitamente às dimensões do viewport:

.texto-responsivo {
  font-size: 4vw; /* O tamanho do texto muda de acordo com a largura do viewport */
}

.div-fluida {
  width: 50vw; /* Ocupa metade da largura do viewport */
  height: 50vh; /* e metade da sua altura */
}

Usando unidades de viewport, você pode garantir que as proporções sejam mantidas não apenas para contêineres, mas também para elementos tipográficos, aprimorando sua responsividade.

Largura e Altura Máximas/Mínimas para Definir Limites Responsivos

Aplicar max/min-width e max/min-height para definir limites máximos e mínimos no redimensionamento de um elemento:

.div-ratio-limitada {
  width: 80%; /* O elemento se escala proporcionalmente */
  max-width: 800px;
  min-width: 300px;
  aspect-ratio: 16 / 9;
}

Essa estratégia permite que o elemento mude de tamanho enquanto mantém suas proporções e evita tamanhos excessivamente grandes ou pequenos.

Resolvendo Problemas de Layout com Clearfix

Clearfix pode resolver efetivamente alguns problemas de layout com elementos float, especialmente em designs responsivos. Ele ajuda o bloco pai a contabilizar seus elementos "flutuantes":

.clearfix::after {
  content: '';
  display: table;
  clear: both; /* Limpando no layout */
}

Clearfix garante que elementos flutuantes não transbordem o elemento pai, o que funciona muito bem com a preservação da proporção.

Classes CSS Reutilizáveis para Especificar Proporções

Crie classes CSS reutilizáveis para facilitar a manutenção de proporções seguindo o princípio DRY (Não Repita). Isso manterá seu código HTML limpo e organizado:

.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9; /* Basta adicionar a classe — e as proporções de 16:9 são mantidas */
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3; /* Facilmente mantenha as proporções de 4:3 também */
}

/* Use classes para divs para definir a proporção desejada */
<div class="aspect-ratio-16-9"></div>
<div class="aspect-ratio-4-3"></div>

Video

Navigation