Como deixar imagens Responsivas (Tutorial)

Por | Atualizado em 2015-11-29

Criar páginas “responsivas” é essencial para garantir maior compatibilidade do seu Website com todos os dispositivos (smartphones, tablets, computadores e até TVs). Criar um site responsivo é bastante simples, especialmente se você usar WordPress.org.

No entanto, vários usuários levantaram a questão: “Como deixar imagens responsivas?”. Para responder a essa questão (e outras que possa enviar por comentário), criamos o seguinte tutorial.

Como deixar imagens Responsivas

Ser responsivo, significa que se adapta às dimensões da página. Você poderá optar por tornar todas as suas imagens responsivas, ou criar uma “class” para usar em imagens específicas.

Para deixar as imagens responsivas, será necessário definir o tamanho da imagem para “100 %”. Para isso, será necessário adicionar o seguinte trecho de código na secção CSS das suas páginas:

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

Se pretender aplicar o tamanho responsivo apenas em determinadas imagens, poderá usar uma class. Por exemplo:

.responsiva {
width: 100%;
height: auto;
}

Se tudo correu bem, as suas imagens serão adaptadas ao tamanho da página onde são exibidas. Veja o nosso exemplo:

Imagem Original:

imagem original

Imagem Responsiva, com os campos “width: 100%;” e “height: auto;”:

como deixar imagens responsivas

Pretende otimizar mais as imagens?

As imagens são essenciais para ilustrar as suas páginas, no entanto, elas tem um impacto significativo na velocidade de carregamento do seu Website.

Não obstante, você poderá otimizar as suas imagens, diminuindo o seu tamanho e usando a funcionalidade “Progressive”. Para mais detalhes, consulte os seguintes tutoriais:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *