Close

19/12/2017

CSS object-fit: para que serve e como utilizar

Uma das propriedades que descobri recentemente (e não é nova) é a object-fit que especifica como o conteúdo de um determinado elemento se encaixa dentro de seus limites definidos por sua larguraaltura.

Os casos que imagino serem os mais comuns seriam o encaixe de uma imagem ou vídeo dentro de um cabeçalho do site, por exemplo:

Cabeçalho do site da Coopers

O problema é que nossos sites devem ser adaptáveis, ou seja, tanto a largura e altura do container muda dependendo do tamanho da tela do dispositivo de acesso, por isso o conteúdo deve se encaixar de forma proporcional, sem perder suas características originais e ficar distorcido.

Como solucionar o problema

Caso você desenvolva um projeto no qual o usuário possa atualizar o conteúdo e a imagem do cabeçalho precise ser alterada, por exemplo, uma saída comum seria utiliza-la como background do elemento com o valor background-size: cover. O problema, além do óbvio uso do estilo inline, é que a imagem em questão não estaria no conteúdo da página e não seria indexada e, caso tal página fosse compartilhada, a imagem não estaria disponível para ser usada na rede social.

Para solucionar este problema de vez, a propriedade object-fit pode ser utilizada, permitindo o uso de uma imagem e definir como o conteúdo deste elemento seja exibido dentro das medidas especificadas por CSS:


Encaixe do conteúdo dentro do espaço definido pelo elemento com object-fit

Sintaxe

A propriedade possui alguns valores, cada um deles com suas respectivas particularidades:

  • fill
    O conteúdo fica exatamente com as medidas do elemento, ou seja, se você definir as medidas de 500px x 250px, o conteúdo dela (a imagem em si) ocupará esse espaço todo;
  • contain
    O conteúdo respeita as dimensões do elemento, porém mantém suas proporções, algo como um max-width ou max-height aplicados na imagem;
  • cover
    O conteúdo preenche todo o espaço, porém de maneira proporcional, sem deixar espaços vazios (como na imagem exemplificada acima). Neste caso é obrigatório que a largura e altura mínima do conteúdo correspondam às medidas definidas;
  • none
    O conteúdo não é redimensionado para ser encaixado dentro das medidas definidas no elemento;
  • scale-down
    O conteúdo é redimensionado como se none ou contain fossem definidos, quaisquer propriedade resulte em uma dimensão menor.

Exemplos práticos

See the Pen CSS object-fit examples by Coopers Digital Production (@coopersdigitalproduction) on CodePen.

Como está o suporte dos navegadores?

De acordo com o caniuse.com o uso desta propriedade é bem seguro, tendo problemas somente no Internet Explorer e Edge até a versão 15. Para contornar a falta de compatibilidade, testei o object-fit-polyfill, o qual se mostrou a solução mais adequada, já que funciona com img, video, srcset e picture.

Na prática este polyfill redimensiona e reposiciona o elemento de acordo com o valor desejado para o object-fit, sem transformá-lo em um simples background.

Referências

  • Perfeito para as imagens de conteúdo, em especial os banners que pegam a largura toda da tela! Show!