Ajustando imagens para layouts responsivos com CSS

Ajustar imagens para layouts responsivos com CSS é uma das únicas medidas que temos atualmente para garantir que a imagem seja exibida no tamanho que queremos em qualquer tamanho de tela. Claro que temos milhares de soluções JS e server-side para garantir que o usuário final do seu site não tenha que baixar bytes desnecessários para cada imagem que você utilizar no seu layout. Além disso, também poderíamos esperar o futuro do elemento picture para modificarmos a maneira em que desenvolvemos nossos sites, mas, como ninguém vive de futuro, ainda temos que utilizar o que nos é dado para garantir a compatibilidade com todos os navegadores ainda disponíveis no mercado (Leia-se: os IEs da vida).

A solução que vou passar aqui não é nada amigável em termos de largura de banda, mas vai resolver o problema do seu layout responsivo em todos os navegadores (com exceção do IE6).

Se você já é do ramo, provavelmente já deve saber que estou falando da propriedade max-width do CSS, mas como este blog não tem foco só em pessoas com alto nível de conhecimento, vamos partilhar a informação.

O básico do básico

Como eu descrevi anteriormente, se você já cria sites com layout responsivo, já deve conhecer o trecho de CSS abaixo:

Isso faz com que todas as imagens do seu layout sejam redimensionadas para o tamanho máximo do elemento que as envolve, ou seja, se sua imagem estiver direto dentro da tag body do seu HTML, ela terá o tamanho alterado nos seguintes casos:

1. Se a largura da tela do navegador for maior que a largura da imagem, ela será mostrada em seu tamanho real;
2. Se a largura da tela do navegador for menor que a largura da imagem, ela terá sua largura reduzida para a largura da tela do navegador;

Exemplo no código:

Se você quiser colocar a imagem dentro de um elemento HTML e quer que apenas as imagens desse elemento tenham a largura adaptável, basta fazer da seguinte maneira:

Se a imagem estiver dentro de qualquer elemento com a classe .post-content, tanto o elemento quanto a imagem terão largura máxima de 700px:

Neste caso, a DIV com classe .post-content é o foco, ela terá a largura máxima de 700px e todas as imagens dentro dela também.

Forçando a barra

Se por algum erro no seu desenvolvimento, alguma classe ou ID tiverem precedência sobre a classe ou ID que ajustam as imagens, você pode tentar forçar com a propriedade !important no seu CSS.

Mas lembre-se, se você declarou seu CSS corretamente, não há motivos para utilizar !important (leia este artigo para entender melhor). É um erro no fluxo do seu código e deve ser corrigido.

Concluindo

Este foi um tutorial bem básico, mas espero que tenha entendido e agregado conhecimento aos seus estudos. Lembre-se de nunca parar de buscar novos conhecimentos, estamos sempre aprendendo algo novo, ou reaprendendo algo que já sabíamos.