O que seria background-size: contain?

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: Imagem de uma ponte por completo, utilizando o contain e outra utilizando o cover

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!