Esse artigo é uma tradução livre do artigo original de um blog que eu amava mas agora está fora do ar.

Esses dias procurei como fazer isso e não encontrei de jeito nenhum, decidi ir lá no Wayback Machine e acabei encontrando após descobrir que o blog estava offline.

Vamos ao conteúdo.

Qual é a maneira mais fácil de dimensionar imagens de fundo em layouts responsivos? Usamos uma técnica antiga e a aprimoramos para alterar fluidamente a proporção das imagens de fundo.

Layouts responsivos permitem dimensionar dinamicamente a largura de um site para que ele se ajuste tanto a dispositivos móveis pequenos quanto a computadores de mesa maiores. Um elemento <img> com largura percentual terá sua altura ajustada automaticamente, mantendo a mesma proporção ao ser redimensionado.

Se quisermos obter o mesmo efeito com imagens de fundo, precisamos descobrir como manter a proporção de qualquer elemento HTML.

Proporção(aspect-ratio) fixa

O truque que usaremos para manter a proporção é aplicar um preenchimento vertical. Definimos o preenchimento como uma porcentagem baseada na largura do elemento. Essa técnica foi originalmente descrita para vídeos, mas funciona igualmente bem para qualquer elemento.

Suponha que queremos ter uma imagem de 800 por 450 pixels. Nosso objetivo é criar um elemento que mantenha a proporção de 16:9 quando sua largura for alterada.

Abaixo está um exemplo de código. Neste exemplo, usamos px, mas a técnica funciona igualmente bem com unidades em.

<div class="column">
  <figure class="fixedratio"></figure>
</div>

div.column {
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}

Adicionando uma imagem de fundo

O elemento é dimensionado e mantém sua proporção. No entanto, se adicionarmos uma imagem de fundo, ela não será escalonada automaticamente junto com o elemento. Para resolver isso, adicionamos background-size: cover.

Uma desvantagem de dimensionar imagens de fundo para cobrir todo o elemento é que isso não é compatível com o Internet Explorer 8 e versões anteriores. Para obter um resultado aceitável nessas versões, também centralizamos a imagem usando o atributo background-position.

Devemos garantir que a imagem tenha pelo menos a mesma largura máxima do elemento. Dessa forma, o elemento nunca será maior que a imagem. Se o elemento for menor, a imagem será cortada. Como essas versões do Internet Explorer são usadas apenas em desktops, isso não será percebido por muitas pessoas.

<div class="column">
  <figure class="fixedratio"></figure>
</div>

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */

  background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);
  background-size: cover;
}

Proporção(aspect-ratio) fluida

Podemos levar isso um passo adiante. Suponha que temos uma imagem widescreen que fica ótima em um computador desktop. Em um dispositivo móvel, não queremos usar a mesma proporção, pois a imagem ficaria muito pequena. Também não queremos manter exatamente a mesma altura, pois a imagem se tornaria muito alta.

Em vez disso, a altura deve diminuir gradualmente à medida que a largura é reduzida. Chamamos isso de proporção fluida.

Esse efeito pode ser alcançado reduzindo o preenchimento percentual e definindo uma altura para o elemento.

Suponha que a imagem grande tenha 800 por 200 pixels e decidimos que sua altura deve ser de apenas 150 pixels quando a largura for reduzida para 300 pixels. Agora, precisamos calcular os atributos height e padding-top.

O diagrama acima mostra a relação entre as duas dimensões. A inclinação da linha corresponde ao atributo padding-top. A altura inicial corresponde ao atributo height, representando a altura que o elemento teria se sua largura fosse zero.

Podemos implementar uma proporção fluida ajustando o exemplo com esses valores calculados.

<div class="column">
  <figure class="fluidratio"></figure>
</div>

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
  background-size: cover;
}

Resumo

É possível fazer com que qualquer elemento HTML ajuste sua altura proporcionalmente à sua largura. Elementos com o atributo padding-top em porcentagem serão dimensionados com base em sua largura. Para que as imagens de fundo sejam escaladas em navegadores modernos, basta adicionar background-size: cover.

Para que a proporção mude gradualmente ao redimensionar, também defina o atributo height. Com base em dois tamanhos com proporções diferentes, é possível calcular corretamente a altura e o preenchimento vertical.