Minha imagem ficou enorme, como faço para deixar do tamanho do texto e alinhado?
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!
Minha imagem ficou enorme, como faço para deixar do tamanho do texto e alinhado?
Olá matheusinho, todo bem? Olha amigo não tenho acesso ao seu codigo então não posso ajudar muito, mas sei o que pode resolver seu problema! Primeiro, no seu CSS, va na sua classe ou id da imagem, e modifique a sua posição em relação ao Top e Left. Segundo, para diminuir a imagem você pode usar o width e o height no css, no elemento, você pode usar medidas de px ou porcentagem, existem outras mas são um pouco mais complicadas, na porcentagem, você vai modificar a largura e altura de acordo com o elemento pai.
Vale analisar o fato, se você não conseguir modificar a posição ou a largura(width) ou a altura (height) do elemento (imagem), você tera que modificar as atribuições de position ou também o display do elemento.
Bem, estas coisas vão depender do seu "olhomêtro", e ir modificando aos poucos até achar o que você quer ou aquilo que querem que você faça!
Sou Iniciante támbem, mas com um pouco do meu conhecimento espero ajudar você! Caso tenha dificuldades com o que eu falei ou sobre a logica do seu código, não deixei de buscar ajuda aqui no fórum e no discord da Alura! e Tambem pesquise no Google e Youtube, bem espero ter ajudade, Abraços!
Olá! Então eu tentei fazer isso, mas toda vez que aumento a imagem ou diminuo as letras ficam criando linhas sabe?
abaixo esta meu codigo css e meu html
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,600;1,400&display=swap');
*{
margin: 0; /*box model*/
padding: 0;
}
body{
height: 100vh; /*ocupar a tela 100%*/
box-sizing: border-box; /*propriedade não sai da tela*/
background-color: #d9d9d9;
color: #2B3467;
}
.textodestaque{
color: #EB455F ;
}
.apresentacao{
margin: 10% 15%;
display: flex;
align-items: center; /*alinha conforme a imagem*/
justify-content: space-between;
}
.apresentacao__conteudo{
display: flex;
flex-direction: column;
width: 615px;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: 'Krona One', sans-serif;
}
.apresentacao__conteudo__texto{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__link{
display: flex;
justify-content: space-between;
}
.apresentacao__link__link{
background-color: #EB455F;
width: 280px;
text-align: center;
border-radius: 16px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
color: #d9d9d9 ;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
.imagem__conteudo{
width: 2000px;
height: 2000px;
}<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Treinamento HTML</title>
<link rel="stylesheet" href="style.css"> <!--Tag para ligar o arquivo html com o css-->
</head>
<body>
<header> <!--Cabeçalho-->
</header>
<main class="apresentacao"> <!--Conteúdo Principal-->
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="textodestaque"> com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá, sou Rachel Pereira, desenvolvedor de Front-End com especialidade em HTML, CSS e futuramente JavaScript. Estou aprendendo programação para ajudar pequenos negócios e designer a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentacao__links">
<a class="apresentacao__link__link" href="https://www.linkedin.com/in/rachel-victória-60a26019b/">Linkedin</a>
<a class="apresentacao__link__link" href="https://github.com/rachel4victoria">GitHub</a>
</div>
</section>
<img class="imagem__conteudo" src="imagem1.png" alt="Foto da Rachel Pereira">
</main>
<footer> <!--Rodapé-->
</footer>
</body>
</html>Mateusinho, provavelmente este problema vem do fato de você esta usando valores fixos "px", para definir a largura e altura para torna-la responsiva independente da tela ou dos elementos, use também o max-width para tornar-la responsiva e height: auto para evitar distorcer a imagem!
Ex: .imagem__conteudo{ width: 70%; max-width: 1000px; /* Defina o tamanho máximo desejado / height: auto; / Para manter a proporção da imagem */ }
Espero que ajude! Lembre-se modifique a sua vontade, para que fique certo!
Se você puder upar seu projeto no GitHub para eu puder baixa-lo completo e eu mesmo verificar, acredito que posso entender mais dos problemas, ja que não tenho acesso a imagem!
Explicacão do por que isto esta acontecendo:
"Quando você aumenta ou diminui o tamanho de uma imagem, o tamanho do contêiner que a envolve também pode mudar. Se o contêiner não for dimensionado corretamente em relação à imagem, isso pode afetar o layout do restante dos elementos na página, incluindo o texto. No caso em que você definiu um tamanho fixo para o contêiner de imagem (width e height), o tamanho do contêiner não será alterado automaticamente quando a imagem for redimensionada. Isso pode causar problemas de layout, especialmente se o restante dos elementos na página não estiverem ajustando dinamicamente o suficiente para acomodar as mudanças. Para evitar esse problema, é recomendável definir o tamanho do contêiner de imagem usando valores relativos, como porcentagens ou unidades de visualização (vw ou vh). Isso fará com que o tamanho do contêiner de imagem seja ajustado dinamicamente em relação ao tamanho da tela. Além disso, ao usar a propriedade max-width no contêiner de imagem, você pode garantir que a imagem não ultrapasse a largura da tela, mantendo o layout geral da página consistente e evitando problemas de quebra de linha no texto."
Fiz do jeito que falo e a imagem praticamente so aumentou mas não se alinhou com o texto Achei um jeito que deu o que eu queria, mas não sei se é o correto
.imagem__conteudo{
position: relative;
margin-top: 50%;
width: 1100px; e outra coisa, minha pagina não ficou no inicio da tela, praticamente tenho que rolar ate o centro para conseguir acessar