Entrar Ainda não tem acesso?
2
respostas

Imagens estão ficando muito grandes na minha página — Como ajustar o tamanho corretamente?

por Samuel Silva Souza
| 18.6k xp | 4 posts

Oi, pessoal! Estou aprendendo HTML e CSS em um curso e estou fazendo um projeto do meu jeito para praticar. Coloquei algumas imagens na página, mas elas estão saindo muito grandes, muito maiores do que eu queria.

Por exemplo, tenho essa imagem no meu código:

html Copiar Editar Mas ela aparece enorme na tela e acaba atrapalhando o layout, que eu montei com flexbox para organizar o texto e a imagem lado a lado.

No momento, não consegui controlar o tamanho da imagem porque ainda não tenho a logo ou imagem oficial baixada em um tamanho ideal, e não sei exatamente como fazer para limitar o tamanho dela no CSS.

Aqui está meu código HTML e CSS atual para quem quiser dar uma olhada e me ajudar:

HTML:

html Copiar Editar

Meu Projeto de Aprendizagem

Estou estudando programação e criando essa página para praticar.

<img src="/imagens/FotoDoAcai.png">
CSS:

css Copiar Editar body { background-color:#1E1252; color: white; font-family: Arial, sans-serif; }

.apresentacao { display: flex; align-items:center; justify-content: space-around; padding: 8%; } Minha dúvida: Como faço para controlar o tamanho dessa imagem para que ela não fique tão grande, fique proporcional e alinhada ao lado do texto, dentro do layout flexbox?

Agradeço qualquer ajuda ou dica!

imagen sem a logo Insira aqui a descrição dessa imagem para ajudar na acessibilidadeImagem com a logo Insira aqui a descrição dessa imagem para ajudar na acessibilidadeMeu codigo Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por Samuel Silva Souza
| 18.6k xp | 4 posts

O codigo html: 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Açaí do Samu</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
   <header class="cabecalho">
    <nav class="cabecalho__menu">
        <a class="cabecalho__menu__link"> Menu Principal </a>
        <a class="cabecalho__menu__link"> Cardapio </a>
    </nav>
   </header> 
   <main class="apresentacao">
        <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Seu resgate no calor: <strong class="titulo-destaque"> Açaí do Samu a caminho!</strong></h1>
        <p class="apresentacao__conteudo__texto">Olá! Aqui é o Açaí do Samu, seu resgate de confiança nos momentos de urgência por sabor. Atendimento rápido, sabor marcante. Pronto pra ser atendido?</p>
    <div class="apresentacao__links"> 
        <h2 class="apresentacao__links__subtitulo"> Acesse nossas redes Sociais </h2>
        <a class="apresentacao__links__link" href="https://instagram.com/acai_do_samu">instagram</a>
        <a class="apresentacao__links__link" href="https://www.ifood.com.br/delivery/betim-mg/acai-do-samu-sao-luiz/77e096e9-3f7e-41d5-82ba-b71cc0c1958e">Ifood</a>
        <a class="apresentacao__links__link" href="https://www.google.com/maps/place/A%C3%A7a%C3%AD+do+Samu/@-19.9300903,-44.1327978,17z/data=!3m1!4b1!4m6!3m5!1s0xa6c10bb1558c63:0xd4cd49b5086b165b!8m2!3d-19.9300903!4d-44.1302229!16s%2Fg%2F11m5yvr9gs?entry=ttu&g_ep=EgoyMDI1MDUyMS4wIKXMDSoASAFQAw%3D%3D">Google</a>
    </div>     
    </section>
         
    <img src="/imagens/FotoDoAcai.png">
    
   </main>
   <footer class="rotape">
    <p> Desenvolvido por Samuel.</p>
   </footer>
</body>
</html>

o Codigo Css:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    box-sizing: border-box;
    background-color:#1E1252;
    color: white;
}

.titulo-destaque{
    color: #A200E2;
}

.apresentacao {
    display: flex;
     align-items:center;
     justify-content: space-around;
     padding: 8%;
}

.apresentacao__conteudo{
    width: 593px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}
.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo{
    font-family: "Krona One" sans-serif;
    font-weight: 400;
    font-size: 24px
}

.apresentacao__links__link {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

border: 2px solid #A200E2;
width: 378px;
text-align: center;
border-radius: 8px;
font-weight: 600;
font-size: 24px;
padding: 21.5px 0px;
text-decoration: none;
color: #f2f2f2;
z-index: 1;
background-color: transparent;
transition: color 0.3s ease;
}

.apresentacao__links__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #A200E2;
    z-index: -1;
    transition: height 0.4s ease;
}

.apresentacao__links__link:hover::before {
    height: 100%;
}

.apresentacao__links__link:hover {
    color: #ffffff;
}

.rotape{
    padding: 2px;
    background-color: #A200E2;
    color: black;
    text-align: center;
    font-family: 'Montserrat' 'sans-serif';
    font-size: 24px;
    font-weight: 400;
}
por Victor Costa Santos
| 2296.3k xp | 4585 posts
Alura Scuba Team

Oi, Samuel! Como vai?

O problema aqui é que as imagens não estão com tamanho controlado no CSS, então elas ficam gigantes mesmo.

Veja como ajustar do jeito que foi ensinado na aula, usando o mesmo padrão:

Para a imagem principal do açaí no seu CSS, adicione:

.apresentacao img {
  width: 300px;
  height: auto;
}

Assim a imagem vai respeitar o layout flexbox e ficar do lado do texto, proporcional.

Na aula, usamos a imagem dentro do link, sem classe específica na <img> então use a classe "apresentacao__links__navegacao". Veja como deve ser:

<a class="apresentacao__links__navegacao" href="https://linkedin.com/in/rafaellaballerini">
  <img src="./assets/linkedin.png">
  linkedin
</a>

E no CSS:

.apresentacao__links__navegacao img {
  width: 24px;
  height: 24px;
}

Esse seletor cuida só dos ícones dentro dos links.

Esse codigo limita o tamanho da imagem principal e dos icones sociais, do jeito que voce viu na aula.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade