CSS: Como deixar uma imagem responsiva

Publicado em 24/03/2020

Neste artigo veremos como deixar uma imagem responsiva, ou seja, que se adapta aos containers que ela for inserida e não prejudica sua resolução.

Fala programador, beleza? Bora aprender coisa nova!

A web vem evoluindo e cada vez mais a necessidade de deixar páginas responsivas cresce

Responsividade significa adaptação aos mais diferentes dispositivos e tamanhos de tela

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

E as imagens são muito presentes nas páginas, vamos ver como deve ser feito para deixá-las responsivas

Primeiramente veja o código HTML do nosso exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como deixar uma imagem responsiva</title>
</head>
<body>
    <div id="container-da-imagem">
        <img src="img/teste1.jpg">
    </div>
    
    <img src="img/teste1.jpg">
</body>
</html>

Temos dois casos, bastante comuns, no primeiro a imagem fica dentro de um container e no outro livre no HTML

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Então para deixar a imagem responsiva nos dois casos, apenas precisamos setar a width para 100%

Automaticamente a imagem se adaptará a largura do container, no primeiro caso, e da tela no segundo

Vejamos o código CSS:

#container-da-imagem {
    width: 300px;
    position: relative;
}

#container-da-imagem img {
    width: 100%
}

img {
    width: 100%
}

E agora o resultado dos exemplos no navegador:

E assim conseguimos deixar a imagem adaptável a qualquer resolução

Sem perder a qualidade, quase seu tamanho seja maior do que os especificados de seu container, legal né? 😀

Conclusão

Neste artigo foi apresentada a forma correta de deixar imagens responsivas/adaptáveis a qualquer container ou bloco

Precisamos apenas atribuir o valor de sua width a 100%

Aí a imagem se comportará corretamente, se adaptando ao container que ela está presenta

Caso não esteja em nenhum, será adaptada ao tamanho da tela

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn

4 Comentários

Oldest

Newest Most Voted

Ismael

5 anos atrás

Bom dia! teria como vc mim ajudar
O slide do meu blog esta com as imagens embaçadas, e gostaria que se ajusta-se ao slider, sou leigo em codigos… um forte abraço!