18.11.2024

Ajuste Automático da Altura da Div ao Tamanho do Fundo: CSS Dinâmico

Resposta Rápida

Apliquei CSS para ajustar automaticamente uma div às proporções de uma imagem de fundo:

<div class="fundo-responsivo"></div>

.fundo-responsivo {
  background: url('imagem.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* Para uma proporção de 16:9 */
}

Para manter a proporção da imagem original, altere o valor de padding-top. Assim, sua div escalará elasticamente com o fundo.

Magia do CSS: Altura Dinâmica para Conteúdo Interno

Se a div precisar conter conteúdo adaptável, você pode usar a seguinte técnica de CSS para aumentar a flexibilidade do contêiner:

.fundo-responsivo::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

Total Responsividade Usando Viewport

Para alcançar um design responsivo ideal, onde os tamanhos dos blocos precisam corresponder a diferentes tipos de dispositivos, use a função calc():

.fundo-responsivo {
  height: calc(100vw * (9 / 16));
}

Dessa forma, a altura da div se ajustará de acordo com a largura da viewport, garantindo uma perfeita adaptabilidade.

Visualização

// Vamos supor que a div é um balão (🎈) e a imagem de fundo é o ar (💨)

// Infundindo ar:
🎈 <-
💨

// O balão se expande:
🎈

Assim como um balão, a div se expande em tamanho para corresponder às proporções do fundo.

Avançado e Confiável: Camadas e Posicionamento de Conteúdo

Ao trabalhar com conteúdo que fica sobre o fundo, é importante definir corretamente o posicionamento dos elementos:

.fundo-responsivo {
  position: relative;
}

.conteudo-sobreposto {
  position: absolute;
}

Para alcançar máxima flexibilidade, posicione o conteúdo sobreposto como absoluto dentro do contêiner pai, dando a ele um posicionamento relativo.

Estratégias Profissionais para Alcançar Flexibilidade

O Método da Imagem "Oculta"

Essa técnica permite esconder uma imagem dentro do bloco enquanto ainda considera suas dimensões. Use o seguinte truque:

<div class="fundo-responsivo">
  <img src="imagem.jpg" aria-hidden="true" style="visibility: hidden; position: absolute;" />
</div>

O navegador carregará a imagem, mas ela ficará invisível, influenciando a altura da div.

JavaScript para Ajuste Dinâmico de Fundo

Se preferir usar JavaScript para controle dinâmico, utilize o seguinte script:

const imagem = new Image();
imagem.onload = function() {
  const ratioAltura = this.height / this.width * 100;
  const div = document.querySelector('.fundo-responsivo');
  div.style.paddingTop = `${ratioAltura}%`;
};
imagem.src = 'imagem.jpg';

Pré-processamento de Tamanhos de Imagem no Lado do Servidor

Essa abordagem significa que o servidor pré-processará os parâmetros de tamanho principais para a div:

<div class="fundo-responsivo" style="padding-top: <%= ratioAlturaCalculada %>%;">

Recursos Úteis

1. Imagem de Fundo Perfeita para Página Inteira | CSS-Tricks
2. background-size - CSS: Folhas de Estilo em Cascata | MDN
3. Como Criar uma Imagem de Página Inteira
4. Módulo 3 de Fundos e Bordas em CSS
5. Imagens Responsivas Simples com Imagens de Fundo em CSS — Smashing Magazine
6. Caixas com Proporção | CSS-Tricks
7. Torne Esse Fundo Gigante, Por Favor! – A List Apart

Video

Navigation