Boa noite! Espero que estejam bem!
Como eu faço para diminuir a minha imagem? Vi que um colega teve a mesma dúvida, porém não entendi como diminuir - sou muito iniciante no ramo! hehe.
Muito obrigada desde já!!!
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!
Boa noite! Espero que estejam bem!
Como eu faço para diminuir a minha imagem? Vi que um colega teve a mesma dúvida, porém não entendi como diminuir - sou muito iniciante no ramo! hehe.
Muito obrigada desde já!!!
Não se preocupe, ficarei feliz em ajudar! Para diminuir uma imagem usando HTML e CSS, você pode usar a propriedade width no seu código CSS. Aqui está um exemplo simples:
Suponha que você tenha o seguinte HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Sua Página</title>
</head>
<body>
<div class="container">
<img src="sua-imagem.jpg" alt="Sua Imagem">
</div>
</body>
</html>
Agora, crie um arquivo CSS (por exemplo, styles.css) com o seguinte conteúdo:
.container {
width: 50%; /* Ajuste o valor conforme necessário, 50% é apenas um exemplo */
}
img {
width: 100%; /* Isso fará com que a imagem ocupe 100% da largura do contêiner */
height: auto; /* Isso garantirá que a altura seja ajustada automaticamente para manter a proporção original da imagem */
}
Neste exemplo, a classe .container tem uma largura de 50%, o que significa que a imagem ocupará metade da largura do contêiner. A propriedade width: 100%; na tag img garante que a imagem preencha toda a largura do contêiner, enquanto a propriedade height: auto; mantém a proporção original da imagem.
Você pode ajustar os valores de largura conforme necessário para atender aos requisitos específicos do seu layout. Espero que isso ajude! Se tiver mais perguntas, sinta-se à vontade para perguntar.
Carlos, excelente explicação! Funcionou aqui!
Muito obrigada mesmo!!
Abraço.
Você deve alterar os valores de height (altura) e width (largura)