Como faço para alterar o tamanho das imagens. Por exemplo, estou colocando uma imagem no código e está ficando grande na tela, as vezes também diminui as letras. Consigo alterar o tamanho para que fique menor pelo próprio codigo ou que se ajuste automático??
Olá, Stephanie! Tudo bem?
Agradeço por compartilhar sua dúvida no fórum.
Pelo que você comentou, a imagem está ficando muito grande na tela e, em alguns casos, parece até influenciar o tamanho dos textos. Isso normalmente acontece porque a imagem está sendo exibida no tamanho original dela (resolução real do arquivo), e ainda não foi definido nenhum controle via CSS.
Sim, você consegue ajustar totalmente o tamanho pelo próprio código.
A forma mais comum é usando CSS:
img {
width: 300px;
}
Assim você define uma largura fixa. A altura será ajustada automaticamente para manter a proporção.
Se quiser que a imagem se adapte ao tamanho da tela (responsivo), o ideal é usar:
img {
max-width: 100%;
height: auto;
}
Isso faz com que:
Se a imagem estiver afetando o layout ou empurrando textos, pode ser que ela esteja dentro de um container sem controle de largura. Nesse caso, vale também organizar melhor a estrutura:
.container {
width: 50%;
}
Teoricamente, imagens são elementos inline por padrão e ocupam o espaço conforme seu tamanho original. Quando não controlamos isso com CSS, elas podem quebrar o layout. Por isso, em projetos reais, quase sempre usamos max-width: 100% como boa prática para evitar esse tipo de problema.
Espero que eu tenha conseguido te ajudar.
Conte com o fórum sempre que precisar.
Ainda estou na parte de HTML, colocando isso no VS Code ele não modifica, estou fazendo algo errado?