Então, a gente aprendeu como formatar as fontes e as estruturas, mas a minha imagem ficou muito gigante em relação ao que foi trabalhado durante todo o curso. Como faço para manusear as imagens para que ela não fique tão discrepantes em relação ao texto?
Oi, Hebert.
Pra ajustar o tamanho das imagens no seu projeto HTML e CSS, você pode utilizar algumas propriedades de CSS.
Usando a propriedade width e height:
Você pode definir a largura (width) e a altura (height) da imagem diretamente no CSS. Por exemplo:
img {
width: 50%; /* ou qualquer valor que você achar adequado */
height: auto; /* mantém a proporção da imagem */
}
Usando classes específicas: Se você quiser aplicar estilos diferentes para imagens específicas, pode criar classes no CSS e aplicá-las às imagens no HTML:
<img src="sua-imagem.jpg" class="imagem-pequena">
.imagem-pequena {
width: 200px; /* ou qualquer valor que você achar adequado */
height: auto; /* mantém a proporção da imagem */
}
Utilizando Flexbox: Se você estiver utilizando Flexbox para o layout, pode controlar o tamanho das imagens dentro de um contêiner flexível:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%; /* garante que a imagem não ultrapasse o tamanho do contêiner */
height: auto; /* mantém a proporção da imagem */
}
Essas são algumas maneiras de ajustar o tamanho das suas imagens para que fiquem mais harmoniosas em relação ao texto.
Espero ter ajudado e bons estudos.
Um abraço e bons estudos.