preencher toda tela

[feliper 0]

Boa noite pessoal, estou aprendendo a programar em html5+css3 e estou tendo dificuldades em trabalhar com imagens e que elas diminuam de acordo com o tamanho da visualização do usuário que acessa a pagina.

 

estava fazendo http://www.feliper.com/catalago/ mas não está ficando legal o banner do meio, pois se o usuário tiver uma resolução menor que fullhd (1920) ele gera barras no navegador, gostaria de uma orientação de vocês como corrigir isto ou até um tutorial onde ensine isto.

 

Fico no aguardo e desde já agradeço a paciência :)

[reebr 94]

Acho inviável fazer o menu todo com imagens. É possível fazer aquilo somente com css, tornando-o muito mais flexível.

Quanto a imagem do meio, coloque dentro de uma div. Esta div você ajusta em % ao invés de px;

[feliper 0]

Acho inviável fazer o menu todo com imagens. É possível fazer aquilo somente com css, tornando-o muito mais flexível.

Quanto a imagem do meio, coloque dentro de uma div. Esta div você ajusta em % ao invés de px;

 

Mas já esta sendo ajustado em % da uma olhada no css: http://www.feliper.com/catalago/_css/estilo.css

[reebr 94]

section#banner img {

margin-left: 15%;

}

[androidel 7]

Olá feliper. :D

 

Pelo que eu entendi, você quer que o banner se ajuste a tela do usuário, sendo menor que 1920px de largura. Certo? Faça o seguinte:

 

Na section#banner, adicione uma propriedade chamada:

text-align: center;

Na section#banner img, remova:

margin-left: 460px;

PS: Visualizado pelo editor do Mozilla Firefox.

[feliper 0]

Não deu muito certo não, veja como ficou androidel, fiz como me passou. Alguem poderia me ajudar neste caso?

[DiogoCercilio 0]

Crie uma div com 100% de largura, que servirá de caixa (wrapper) para a div que receberá a imagem do banner. Esta div deverá ter o atributo "text-align:center".

Quanto a div que vai receber a imagem do banner, vejo pelo menos essas duas opções:

 

1º - Insira a imagem diretamente pelo HTML, usando <img src...>. Depois atribua "max-width" 100% para a imagem.

2º - Insira a imagem como background da div banner, e depois use o atributo "background-size" para 100%;

 

obs: Se a sua preocupação é quanto a responsividade do site, esta não é a melhor saída, pois você vai continuar tendo imagens grandes, porém redimensionadas... Para isso, procure por media-queries.

 

Espero que tenha ajudado.

 

Diogo Cercílio

diogocercilio.com

[androidel 7]

Olá feliper,

 

Eu visualizei o código CSS do seu site e pelo editor do Mozilla Firefox, parece que não foi igual ao que eu mencionei. No seu código CSS, remova:

section#banner {
    max-width: 100%;
    max-height: 449px;
    background: url("../_imgs/fundo-banner-infinito-left.jpg") left no-repeat, url("../_imgs/fundo-banner-infinito-right.jpg") right no-repeat;
}
section#banner img {
    max-width: 100%;
    text-align: center;
}

 

E adicione:

section#banner {
    width: 100%;
    text-align: center;
    background: url("../_imgs/fundo-banner-infinito-left.jpg") left no-repeat, url("../_imgs/fundo-banner-infinito-right.jpg") right no-repeat;
}

section#banner img {
    max-width: 100%;
    text-align: center;
}

Teste e me diga os resultados. ( '-' )