Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como faço pra imagem ficar no meio e se adaptar as telas maiores?

Referente ao curso Layouts Responsivos: trabalhando com layouts mobile, no capítulo Evoluindo do mobile ao desktop e atividade Adaptação estrutural

por Yuri Cruz Franca
| 167.8k xp | 63 posts

Fazendo do jeito do instrutor 

@media screen and (min-width: 1024px) /*Geralmente sãos os desktops*/{
    .chamada {
        background-image: url(../img/bg-intro.jpg);
        background-size: cover;

        padding-top: 8.25rem;

    }

No meu computador com resolução de 1980, o foguete fica totalmente fora Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tentei ajeitar com o background-position-y mas não fica agradável, tem como eu manter o foguete no centro, em telas maiores e manter as proporções da imagem?

Por exemplo: Quanto maior a tela tela, maior o zoom no meio da imagem?

1 resposta
solução!
por Yuri Cruz Franca
| 167.8k xp | 63 posts

Resolvido: Eu vi que a solução mais próxima foi a background-position-y então fui ver como usar melhor, acontece que eu tava tentando definir com o rem, mas aí mudei a medida para porcentagem e foi bem melhor, solução: 

@media screen and (min-width: 1024px) /*Geralmente sãos os desktops*/{
    .chamada {
        background-image: url(../img/bg-intro.jpg);
        background-size: cover;
        background-position-y: 70%;
        padding-top: 8.25rem;  

   }