Bom dia, tudo bem? Tenho uma dúvida sobre o que seria esse background-size: contain; Para que ele serve? Quando utilizar e porque? Obrigado!
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
Bom dia, tudo bem? Tenho uma dúvida sobre o que seria esse background-size: contain; Para que ele serve? Quando utilizar e porque? Obrigado!
Olá, Ruan! Como vai?
O background-size: contain; é uma propriedade do CSS que permite controlar o tamanho da imagem de fundo. Especificamente, o valor contain redimensiona a imagem de fundo para garantir que ela esteja totalmente visível, mantendo suas proporções originais.
Por exemplo, se você tem uma imagem de fundo que é mais larga do que alta (uma proporção de aspecto paisagem) e você usa background-size: contain; em uma área de fundo que é mais alta do que larga (uma proporção de aspecto retrato), a imagem de fundo será redimensionada para que a largura da imagem preencha a largura da área de fundo. Isso pode deixar um espaço vazio na parte superior e inferior da área de fundo.
Em resumo você pode usar background-size: contain; sempre que quiser garantir que sua imagem de fundo esteja totalmente visível, independentemente das proporções da área de fundo.
Deixo uma imagem de exemplo, mostrando a diferença entre o contain e o cover:
Espero ter ajudado! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Oi Victor, vou bem e vc ? Muito obrigado pela ajuda, consegui compreender, até mais, abraços !