DEV Community

Cover image for Object-fit: o que é, pra que serve, como usar
Aline Bezzoco
Aline Bezzoco

Posted on

Object-fit: o que é, pra que serve, como usar

Créditos da imagem de capa: Just about Photography

Você já ouviu falar da propriedade object-fit do CSS3? Se não, vale a pena ler este artigo, pois ela é bem interessante de se conhecer.

O object-fit é uma propriedade que permite que faça ajustes no redimensionamento da imagem dentro de um container, o que significa que você pode escalar imagens, ocupar todo o container e resolver aquele famoso problema daquelas imagens bastante desproporcionais e que você precisa redimensiona-las dentro de um quadrado ou círculo, por exemplo.

Os principais valores dessa propriedade são:

  • fill
  • cover
  • none
  • scale-down
  • contain

O fill é o padrão. Ele dimensiona o conteúdo dentro do container ocupando todo o espaço e não necessariamente irá deixar a imagem proporcional. Para isso é necessário utilizar o valor cover (que é o mais utilizado). Ele irá dimensionar o conteúdo proporcionalmente no container, porém o mesmo acaba "cortando" alguns trechos da imagem. Se você quer manter a imagem proporcional, mas dentro do elemento sem mantê-lo esticado ou cortando algum pedaço dela o contain é a melhor solução, mas vale ressaltar que ele não irá ocupar todo o espaço como é o cover. O scale-down é bem parecido com o contain, porém diminui a escala. Por fim temos o none que não redimensiona a imagem.

O exemplo abaixo mostra bem o que foi escrito acima:

Para saber mais (incluindo compatibilidade com os navegadores) vocês podem acessar o Mozilla em português para mais informações.

Até a próxima!

Discussion (0)