Você também aprenderá alguns dos problemas gerais que podem ocorrer quando você está tentando tornar as imagens responsivas - e tentarei explicar como resolvê-los.
Como tornar as imagens responsivas com CSS
Devo usar unidades relativas ou absolutas?
Tornar uma imagem fluida ou responsiva é, na verdade, muito simples. Quando você carrega uma imagem no seu site, ela tem largura e altura padrão. Você pode alterar os dois com CSS.
Para tornar uma imagem responsiva, você precisa dar um novo valor para sua propriedade de largura. Então a altura da imagem se ajustará automaticamente.
O importante a saber é que você deve sempre usar unidades relativas para a propriedade de largura, como porcentagem, em vez 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 consultas de mídia?
Uma das perguntas que mais me fazem é se você deve usar consultas de mídia ou não.
Uma consulta de mídia é outro recurso importante do CSS que ajuda a tornar um site responsivo. Não vou entrar em mais detalhes aqui, mas você pode ler meu outro post mais tarde, para aprender como usar as consultas de mídia com mais detalhes.
A resposta a essa pergunta é: “depende”. Se quiser que sua imagem tenha tamanhos diferentes de um dispositivo para outro, você precisará usar consultas de mídia. Caso contrário, você não vai.
Agora, para este exemplo, sua imagem tem largura de 50% para qualquer tipo de tela. Mas quando você deseja torná-lo em tamanho original para dispositivos móveis, você precisa obter ajuda de consultas de mídia:
@media only screen and (max-width: 480px) { img { width: 100%; }}
Portanto, com base na regra de consulta de mídia, qualquer dispositivo menor que 480px terá o tamanho total da largura da tela.
Você também pode assistir a versão em vídeo desta postagem abaixo:
Por que a propriedade max-width não é ótima?
Outra maneira de os desenvolvedores criarem imagens responsivas é a propriedade max-width. No entanto, esse nem sempre é o melhor método a ser usado, porque 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 do que seu valor de largura máxima (mas pode ser menor).
Por exemplo, se a imagem tiver uma largura padrão de 500 px e se o tamanho da tela tiver apenas 360 px, você não conseguirá ver a imagem completa porque não há espaço suficiente:
img { max-width: 100%; width: 500px; // assume this is the default size}
Portanto, você pode definir uma propriedade de largura máxima para a imagem e configurá-la como 100%, o que reduz a imagem de 500 pixels para o espaço de 360 pixels. Assim, você poderá ver a imagem completa em uma tela menor.
O bom é que, como você está usando uma unidade relativa, a imagem ficará fluida em qualquer dispositivo menor que 500px.
Infelizmente, o tamanho da tela ficará um pouco maior do que 500px, mas a imagem não, porque ela tem 500px de largura padrão. Essa abordagem interromperá a capacidade de resposta da imagem.
Para corrigir isso, você precisa usar a propriedade width novamente, o que torna a propriedade max-width inútil.
E sobre Heights?
Outro problema comum que você pode encontrar tem a ver com a propriedade height. Normalmente, a altura de uma imagem se redimensiona automaticamente, então você não precisa atribuir uma propriedade de altura às suas imagens (porque isso meio que quebra a imagem).
Mas, em alguns casos, você pode ter que trabalhar com imagens que devem ter uma altura fixa. Portanto, quando você atribui uma altura fixa à imagem, ela ainda responderá, mas não terá uma boa aparência.
img { width: 100%; height: 300px;}
Felizmente, há 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 ajuste ao objeto. Vamos usar a propriedade de ajuste de objeto e atribuir um valor, que fará com que sua imagem tenha uma aparência melhor:
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 de ajuste do objeto, mas pode ser útil corrigir esses tipos de problemas.
Espero que este post tenha ajudado você a entender e resolver seus problemas com imagens responsivas. Se você quiser saber mais sobre desenvolvimento web, sinta-se à vontade para verificar meu canal do Youtube.
Obrigado por ler!
