Boa noite,
Vocês poderiam me explicar o "background-size: contain" e por que ele foi usado nessa situação?
Obrigada!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa noite,
Vocês poderiam me explicar o "background-size: contain" e por que ele foi usado nessa situação?
Obrigada!
Olá, Jaqueline.
Tudo bem?
A propriedade CSS background-size: contain é usada para definir o tamanho da imagem de fundo em relação ao elemento que a contém. Quando definido como "contain", a imagem de fundo é dimensionada para caber dentro do elemento, preservando a proporção original da imagem e mantendo-a completamente visível.
Quando a imagem de fundo é dimensionada para caber dentro do elemento, ela pode ficar menor do que o próprio elemento. Nesse caso, a imagem será centralizada no elemento tanto horizontalmente quanto verticalmente. Se a imagem for maior do que o elemento, ela será dimensionada para caber completamente dentro do elemento, o que pode resultar em cortes na imagem.
A propriedade background-size também pode ser definida como cover, que dimensiona a imagem para preencher completamente o elemento, mantendo a proporção da imagem original e cortando as partes da imagem que ultrapassam os limites do elemento.
Em resumo, background-size: contain é usado para garantir que a imagem de fundo seja visível por completo, mesmo que fique menor do que o próprio elemento. É útil em casos onde a imagem é importante, mas o tamanho do elemento é prioritário.
Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.
Oi Renan!
Tudo bem?
Obrigada pela explicação completa, entendi perfeitamente!