Criando imagens responsivas com CSS

Olá pessoa, certamente você já deve ter tentado por diversas vezes criar imagens que se adapta ao layout do blog. Mas veja bem, se as imagens têm valor fixo, como é possível criar um redimensionamento automático?

Bom, uma imagem pode ser facilmente redimensionada com o CSS, não importa se ela tem 50px ou 400px, se declararmos na folha de estilo que a imagem vai ter mais de 50px ou mais 400px, ela com certeza vai seguir a regra do valor declarado, porém uma simples declaração no CSS não garante a qualidade das imagens e isso de fato dificulta um pouco as coisas.

img {
   width: 100%;
   height: auto;
}

Se você entende um pouco de CSS, certamente deve saber que o código acima é o básico para declarar imagens responsivas, porém esta declaração pode ser um problema para imagens pequenas, depois de uma certo ponto ela começa a se esticar perdendo totalmente o foto. Podemos resolver este problemas substituído algumas propriedades do CSS que estiliza as imagens.

Perda de qualidade

Quando essa perda de qualidade é perceptivo? Vamos supor que o elemento pai tenha uma largura fixa de 800px, dentro deste elemento tem uma imagem com a largura de 400px e altura de 300px, com a declaração do CSS anterior (width e height), a imagem vai se esticar para as laterais até atingir a largura máxima de 800px, com este resultado a imagem perde qualidade por se esticar 400px a mais do que deveria.

Mantendo a qualidade

Não é possível esticar uma imagem sem ela perder a qualidade, porém podemos garantir que ela não ultrapasse a largura ou altura máxima, usado os mesmo exemplos anteriores, podemos fazer uma pequena modificação no CSS dessa forma.

img {
   max-width: 100%;
   height: auto;
}

Veja que substituímos width por max-width, fazendo com que a imagem não se estique além de sua largura máxima.

Imagens lado a lado

As declarações anteriores, são aplicadas em caso de usar uma imagem por elemento, se um elemento em específico tiver mais de uma imagem, e queira criar um efeito de imagens lado a lado, você pode fazer a seguinte declaração no CSS.

img {
   float: left;
   max-width: calc((100%)/3);
   height: auto;
}

Declaramos a seguinte situação para três imagens. Todas as imagens fica situada a esquerda float: left;, essas imagens também vão ter um cálculo com a largura de 100%, apesar delas serem declarada com a largura 100%, as imagens vão usar apenas um terço da tela max-width: calc((100%)/3); e altura proporcional a largura height: auto;.

As regras de CSS para criar imagens responsivas não acaba por aqui, entretanto isso é mais que o suficiente para você construir imagens altamente ajustável com a largura dos elementos e dispositivos usado para acessar uma página web.

Conclusão

Mesmo em grandes front-end como Bootstrap e Materializecss, você não vai ver regras além das que foram mostrada neste artigo, no máximo, o que você veja é uma regra específica para um determinado elemento com media queries @media {...}.

Bom pessoal, eu espero que todos você tenha gostado do post, não esqueça de deixar o seu comentário e compartilhar nas redes sociais.