Artigo original: CSS Responsive Image Tutorial: How to Make Images Responsive with CSS
A maioria dos sites de hoje é responsiva. Se você precisar centralizar e alinhar imagens nesses sites (texto em inglês), precisará aprender a tornar as imagens fluidas ou responsivas com CSS.
Eu postei um vídeo tutorial que explica como fazer um site responsivo passo a passo há algumas semanas. No vídeo, fizemos uma imagem responsiva. Neste artigo, no entanto, eu gostaria de dar um pouco mais de detalhes sobre como tornar as imagens responsivas.
Você também vai aprender sobre alguns dos problemas comuns que podem ocorrer quando você está tentando tornar imagens responsivas - e eu tentarei explicar como resolvê-los.
Como tornar imagens responsivas com CSS
Devo usar unidades relativas ou absolutas?
Tornar uma imagem fluida, ou responsiva, é bem simples. Quando você carrega uma imagem em seu site, ela tem largura e altura padrão. Você pode alterar ambos com CSS.
Para tornar uma imagem responsiva, você precisa dar um novo valor à sua propriedade de largura. Em seguida, a altura da imagem se ajustará automaticamente.
Uma coisa importante a se saber é que você deve usar sempre unidades relativas para a propriedade de largura, como porcentagem, ao invés de unidades absolutas como pixels.
img {
width: 500px;
}
Por exemplo, se você definir uma largura fixa de 500px, sua imagem não será responsiva – porque a unidade é absoluta.
img {
width: 50%;
}
É por isso que você deve atribuir uma unidade relativa, como 50%. Essa abordagem tornará suas imagens fluidas e elas poderão se redimensionar independentemente do tamanho da tela.
Devo usar media queries?
Uma das perguntas que mais recebo é se você deve ou não usar media queries.
Uma media query é outro recurso importante do CSS que ajuda a tornar um site responsivo. Não entrarei em mais detalhes aqui, mas você pode ler meu outro artigo (texto em inglês) mais tarde para aprender a usar consultas de mídia com mais detalhes.
A resposta para essa pergunta é: “depende”. Se você quer que a sua imagem tenha diferentes tamanhos de um dispositivo para outro, então você precisará utilizar media queries. Caso contrário, não.
Agora, para este exemplo, sua imagem tem 50% de largura para qualquer tipo de tela. Mas quando você deseja deixá-la em tamanho real para dispositivos móveis, precisará obter ajuda das media queries:
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}
Portanto, com base na regra da media query (consulta de mídia, em inglês), qualquer dispositivo menor que 480px terá o tamanho total da largura da tela.
Você também pode assistir a versão em vídeo deste artigo abaixo:
Por que a propriedade max-width não é ideal?
Outra maneira que os desenvolvedores podem usar para criar imagens responsivas é a propriedade max-width. No entanto, esse nem sempre é o melhor método a ser usado, pois pode não funcionar para todos os tipos de tamanho de tela ou dispositivo.
A primeira coisa a entender antes de prosseguirmos com um exemplo é o que exatamente a propriedade max-width faz.
A propriedade max-width define uma largura máxima para um elemento, o que não permite que a largura desse elemento seja maior que seu valor max-width (mas pode ser menor).
Por exemplo, se a imagem tiver uma largura padrão de 500px e se o tamanho da sua tela tiver apenas 360px, você não poderá ver a imagem completa porque não há espaço suficiente:
img {
max-width: 100%;
width: 500px; // suponha que esse seja o tamanho padrão
}
Portanto, você pode definir uma propriedade max-width para a imagem e configurá-la para 100%, o que reduz a imagem de 500px para o espaço de 360px. Assim, você poderá ver a imagem completa em uma tela de tamanho menor.
A parte boa é que, como você está usando uma unidade relativa, a imagem será fluida em qualquer dispositivo menor que 500px.
Infelizmente, o tamanho da tela ficará um pouco maior que 500px, mas a imagem não, porque tem uma largura padrão de 500px. Essa abordagem quebrará a capacidade de resposta da imagem.
Para corrigir isso, você precisa usar a propriedade largura novamente, o que torna a propriedade max-width inútil.
E as alturas?
Outro problema comum que você pode encontrar tem a ver com a propriedade height (altura, em inglês). Normalmente, a altura de uma imagem se redimensiona automaticamente, então você não precisa atribuir uma propriedade height às suas imagens (porque isso acaba distorcendo um pouco a imagem).
Mas, em alguns casos, você pode ter que trabalhar com imagens que devem ter uma altura fixa. Portanto, quando você atribuir uma altura fixa à imagem, ela ainda será responsiva, mas não terá uma boa aparência.
img {
width: 100%;
height: 300px;
}
Felizmente, existe outra propriedade que o CSS oferece para corrigir esse problema…
Solução: a propriedade object-fit
Para ter mais controle sobre suas imagens, o CSS fornece outra propriedade chamada object-fit. Vamos usar a propriedade object-fit e atribuir um valor, que fará com que sua imagem fique com uma melhor apresentação:
img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
Se necessário, você também pode usar a propriedade object-position (além de object-fit) para focar em uma parte específica da imagem. Muitas pessoas não estão cientes da propriedade object-fit, mas ela pode ser útil para corrigir esses tipos de problemas.
Espero que este artigo tenha ajudado você a entender e resolver seus problemas com imagens responsivas. Se você quiser saber mais sobre desenvolvimento para a web, fique à vontade para conferir o canal do autor do texto no Youtube.
Obrigado pela leitura!