CSS HTML

CSS: Como deixar uma imagem responsiva

24 de março de 2020

CSS: Como deixar uma imagem responsiva

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.

imagem responsiva capa

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

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

Subscribe
Notify of
guest
4 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ismael

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!

wwww.png
Battisti

oi Ismael, provavelmente é pq a imagem está com baixa resolução…

eric silva

cara me salvou esse post, valeu

Battisti

show Eric!

4
0
Would love your thoughts, please comment.x