5
respostas

Minha imgagem ta enorme

<body>
    <header>
        <h1 class="tituloprincipal"> Ludmila Avelar - Estetica Avançada <h1>
    </header>

    <img id="banner" src="fotobanner.png" >

    <div class="principal">
        <h2 class="titulocentralizado">Meu Objetivo</h2>

        <p>A possibilidade de devolver a  <strong>auto estima</strong> do paciente.
        Ver os olhos brilhando no espelho depois do procedimento.</p>

        <p id="missao"><em>Para realizar os melhor resultado <strong>busco sempre conhecimento e aperfeiçoamento.</strong></em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo estetico. 
        O atendimento possui padrão de excelência, garantindo qualidade e satisfação dos nossos clientes.</p>

    </div>


    <div class="beneficios">
     <h3 class="titulocentralizado">Beneficios</h3>
        <ul>
            <li class="itens">atendimento aos clientes </li>
            <li class="itens">espaço diferenciado </li>
            <li class="itens">localização </li>
            <li class="itens">Profissionais qualificados</li>
        </ul>

        <img src="foto2.png" class="imagem2">

    </div>

</body>
    ---------------------------------------

    body {

}

#banner { width: 100%

}

.principal { background: #CCCCCC; padding: 20px; }

.tituloprincipal { padding-left: 20px; } .titulocentralizado { text-align: center; }

p { text-align: center; }

#missao { font-size: 20px; }

em strong { color: #FF0000; }

.beneficios { background: #FFFFFF; padding: 20px; }

.itens { font-style: italic; }

ul { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; }

.imagem2 { width: 50%; }

eu ja tentei mudar a altura mas quando olho no devtools da invalido

5 respostas

Olá, Gabriel.

Tudo bem?

Você colocou sua imagem dentro do body e definiu a id css para ela como id="banner" está certo, porém colocou width: 100% e isso faz com que a imagem ocupe a largura total da página, ou seja, do <body>. Como sua imagem não esta dentro de uma <div> você pode controlar o tamanho dela pelo arquivo css através do id e isso você fez também, legal. Agora você precisa definir uma largura através do width: ; e uma altura através do height: ;. Começa com um tamanho e vai aumentando até você achar um tamanho ideal: Usa a unidade de medida em px para ter mais noção do que está acontecendo, coloca width: 600px; de largura e height: 400px; para altura:

#banner {
        width: 600px;
        height: 400px;
}

Vai ficar um tamanho legal, depois só ajustar. Espero ter ajudado, mas qualquer dúvida manda aqui de novo!

funcionou mais ou menos pq tive que colocar um tamanho enorme kkk vc acha que o problema possa ser o tamanho da imagem salva?

Olá, Gabriel.

Coloca a imagem dentro de uma <div> e controla o tamanho da div, acho que fica melhor do que deixar a <img id="banner" src="fotobanner.png" > solta dentro do <body>.

Testa ai!

Qualque dúvida manda aqui de novo!

isso aqui? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

A imagem que é o #banner ta maior que a .divimagem, não pode acontecer isso porque a imagem está dentro da <div> .divimagem, ambas tem que ter o mesmo tamanho, ou a <div> tem que ser maior. Faz o seguinte coloca 100% na altura e na largura no #banner que é a imagem ai ela sempre vai preencher o tamanho total da <div> ai você pode colocar o tamanho que quiser na .divimagem que vai alterar o tamanho da imagem:

.divimagem{
    width: 600px;
    height: 400px;
}

#banner{
        width: 100%;
        height: 100%;
}