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:
img{
max-width:100%;
height:auto;
}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:
- Se a largura da tela do navegador for maior que a largura da imagem, ela será mostrada em seu tamanho real;
- 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:
<!DOCTYPE html>
<html>
<head>
<style>
img{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="cropped.jpg" />
</body>
</html> 
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:
.post-content{
max-width:700px;
}
.post-content img{
max-width:100%;
}
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:
<div class="post-content"> <img src="cropped.jpg" /> </div>
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.
.post-content{
max-width:700px;
}
.post-content img{
max-width:100% !important;
}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.
