Como faço pra diminuir somente o tamanho de uma imagem dentro do codigo sem diminuir o texto junto?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como faço pra diminuir somente o tamanho de uma imagem dentro do codigo sem diminuir o texto junto?
Olá, Stephanie, como vai?
Para diminuir apenas o tamanho de uma imagem sem afetar o texto, é necessário ajustar exclusivamente as propriedades da própria imagem. O texto só seria impactado caso estivesse dentro do mesmo elemento que estivesse sendo redimensionado ou se o ajuste fosse aplicado em um contêiner que envolve ambos.
No HTML, a forma mais direta é utilizar os atributos width e height na própria tag <img>. Por exemplo:
<img src="imagem.jpg" alt="Descrição da imagem" width="200">
Nesse caso, a largura da imagem será reduzida para 200 pixels, enquanto o texto permanecerá com o tamanho original.
Outra forma, mais utilizada em projetos reais, é aplicar CSS (que será abordado um pouco mais a frente no curso). Assim, você mantém a separação entre estrutura e estilo. Veja um exemplo:
<!-- HTML -->
<img src="imagem.jpg" alt="Descrição da imagem" class="imagem-pequena">
<p>Este é um texto que não será alterado.</p>
/* CSS */
.imagem-pequena {
width: 200px;
height: auto;
}
O uso de height: auto mantém a proporção original da imagem, evitando distorções.
Qualquer outra dúvida sobre imagens, estrutura ou estilos, o fórum permanece à disposição para ajudar.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!