Como faço pra diminuir somente o tamanho de uma imagem dentro do codigo sem diminuir o texto junto?
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!