4
respostas

Imagem muito grande no navegador Chrome

Pessoal baixei uma outra imagem free para o banner. 68 kb de tamanho e 800X300. Só que ela fica gigante ao abrir o navegador google chrome ocupando de tal forma que deixa o texto bem abaixo tendo que já rolar para ver as primeiras linhas . O que posso estar fazendo errado ? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<!DOCTYPE html>                 
<html lang="pt-br">             
<head>                            

    <meta charset="utf-8">      
    <title>BarberC@l</title>            
    <meta name="viewport" content="width=device-width, initial-escale=1.0">
    <link rel="shortcut icon" href="C:\Users\Desktop\Projeto BarberC@l\ícones favicon\barber4.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="C:\Users\Desktop\Projeto BarberC@l\Css\style.css"> 

</head>                             

<body>

    <img id="banner" src="C:\Users\Desktop\Projeto BarberC@l\Imagens\banner.jpg" alt="Nosso banner inicial " title="abertura barbearia">

    <h1>Um pouco da história da BarberC@l</h1>

    <p>A <strong>BarberC@l</strong> Está Localizada no RS. Fundada em 2017, já é destaque em atendimento e conquista novos clientes a cada dia. Tem por objetivo trazer para o mercado o que há de melhor para o seu cabelo e barba.</p>

    <p id="nossamissao"><em>A missão da <strong>BarberC@l</strong> tem como objetivo principal : <strong> "Proporcionar cortes clássicos com identidade e estilo próprio melhorando a auto-estima dos nossos clientes"</strong>.</em></p>

    <p>Nossos profissionais são experientes e estão sempre antenados às mudanças da moda e das tendências de cortes mais atuais. O atendimento possui o mais alto padrão de agilidade e também de excelência, com garantia de muita qualidade e satisfação plena dos nossos clientes. Você ainda pode desfrutar de uma ótima cerveja artesanal e se divertir jogando nos consoles mais atuais do mercado de games. Estamos esperando vocês.</p>

</body>                             

</html>                             

abaixo o CSS:

body {
    background: #CED4DA;
}

#banner {

    width: 100%;

}

p {
    text-align: center;
}

h1 {
    text-align: center; 
}

#nossamissao {
    font-size: 20px;
}

strong {
    color: #FF0000;
}

em strong {
    color: #FF0000;
}
4 respostas

Usa um editor de imagem e faz a redução do tamanho, assim pode deixar ela do jeito que vc quiser.

Reduzi a imagem, via editor, para 800x300 igual a que está padrão no curso e mesmo assim apresenta esta neste tamanho muito grande. no caso essa imagem que está i está no mesmo tamanho 800x300

Uma observação: evite usar atributo title, em , quando você já tem um atributo que descreve a imagem (alt).

Evite usar ids, para definir estilos no css. Prefira sempre classes. E evite usar o nome puro dos elementos, dê classes para eles. Se um dia esse elemento for subtituido por outro nome, você perde o estilo, ao passo que se você fizer com classe, o estilo permanece.

Quando você define uma largura (width) de 100% para uma imagem, você pega toda a largura da página e a altura (height), cresce de forma proporcional.

Tenta definir uma largura menor para a imagem e veja se se comporta como você queria.

Oi José, tudo bem? Desculpe a demora para retornar!

Bom, a imagem possui 800 pixels de largura e 300 pixels de altura, portanto é para ser uma imagem relativamente grande mesmo. Além disso, como o Jessé mencionou acima, você colocou width: 100%, isso significa que você está pegando toda a largura da página, para ela se tornar flexível.

Tente colocar uma width de 50% para ver se melhora um pouco da maneira que você deseja. Ou você pode redimensiona-lá para um outro tamanho que deseja, como 400 pixels por 200 pixels, daí ficaria:

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

Porém, por questões de adaptação e responsividade, aconselho usar medidas mais flexíveis, como porcentagem (%), rem, em... Portanto, você pode fazer o seguinte:

#banner {
    width: 50%;
}

Me retorne aqui se precisar de alguma outra ajuda! Abraços e bons estudos =)