0

Help me? (CSS)

#CSS
Wagner Santos
Wagner Santos

Olá gente, boa noite!

Quando deixo meu navegador com a tela pequena (maximizada) a imagem fica perfeita, porém, quando eu deixo tela cheia, a imagem não mostra ela 100%, apenas cortada no meio ou as vezes aparece duplicada, poderiam me ajudar? Segue o código que creio onde está o problema:


.filme-principal{

font-size: 17px;

background: linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)100%), url('../imagens/Tempo.jpg');

height: 500px;

background-size: contain;

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

}



3
94

Comentários (3)

0
Vinícius Ferreira

Vinícius Ferreira

05/02/2021 23:58

tem uma técnica interessante pra deixar a imagem responsiva.

width: 100%;

height: auto;


claro que o ideal é você tentar entender o box model do css. Por exemplo: essa classe .filme-principal... como ela está configurada? Ela é uma div?

0
⚡Eros Lima

⚡Eros Lima

05/02/2021 21:59

Talvez: te ajude:


max-width: 100%

max-height: 100%


E busca estudar o tema "Responsividade" onde tem explicações sobre exatamente o que tu ta com dúvidas, eu tive que ler uns livros ai pra entender a aplicar bem estes conceitos.


Dependendo da posição e organização das divs, pode ser tbm a imagem,

0
Dyganar Jesus

Dyganar Jesus

05/02/2021 20:15

Boa noite! Tenta usar o background-size: cover; pra vê se resolve seu problema.

Uma pessoa ambiciosa em solucionar problemas com métodos lógicos e que toca instrumento musical nas horas vagas.

Luxemburgo