A propriedade CSS object-fit

visualizações Publicado em: 14/06/2016 — Atualizado em: ➠ 26/09/2016

Introdução

Se você tem algum conhecimento de CSS, é muito provável que conheça a propriedade background-size.
( ver tutorial sobre as propriedades CSS para background ).

Esta propriedade foi criada pela especificação das CSS3 e se destina a dimensionar a imagem declarada como fundo de um elemento, possibilitando ao desenvolvedor controlar a forma como a imagem ocupa a área do box. Uma das vantagens deste comportamento é inserir imagens de fundo flexíveis em boxes de dimensões flexíveis ( design responsivo ).

A propriedade object-fit foi criada com finalidade semelhante para imagens inseridas diretamente na marcação HTML ( e não as inseridas com uso de background-image ).

Esta propriedade aplica-se não somente a imagens, mas a qualquer elemento da marcação HTML do tipo replaced element ( elemento substituído ).

Em HTML, elemento substituído é um elemento cuja representação está fora do âmbito das CSS. Tais elementos são um tipo de objeto externo cuja representação é independente das CSS. Elementos substituídos típicos são <img>, <object>, <video> ou elementos de formulário, tais como <textarea> e <input>. Alguns elementos, tais como <audio> e <canvas> são elementos substituídos somente em casos específicos. Convém notar que alguns elementos substituídos, mas não todos, têm dimensões intrínsecas, como é o caso do elemento <img>.

Valores válidos para a propriedade object-fit

  • none: o elemento substituído não tem suas dimensões alteradas e é mantida a razão de aspecto (aspect ratio) dele;
  • fill: as dimensões do elemento substituído são alteradas para os valores iguais às dimensões do box container. O elemento substituído preenche todo o container e a razão de aspecto (aspect ratio) será igual a razão de aspecto do box container;
  • contain: as dimensões do elemento substituído são alteradas, o elemento substituído poderá não preencher todo o container e é mantida a razão de aspecto (aspect ratio) dele;
  • cover: as dimensões do elemento substituído são alteradas, ele preenche todo o container e é mantida a sua razão de aspecto (aspect ratio);
  • scale-down: a alteração das dimensões do elemento substituído depende das dimensões dele e do container podendo resultar em efeito igual a none ou contain;

Observe a seguir o efeito da declaração de cada um destes valores. Os efeitos são mostrados em duas colunas e em cada uma delas foi adotada uma imagem diferente e com dimensões diferentes. O container é responsivo. A altura da imagem é fixa e igual a 300px, fazendo com que o container se expanda até aquela altura e mantenha sua altura também fixa. A parte relevante dos códigos da marcação HTML e da folha de estilo CSS são mostrados no final dos exemplos.
Notar que por padrão, o centro da imagem é posicionado no centro do container.

HTML

<div class="container">
  <img src="imagem.jpg" alt="bla..." class="cover" />
</div>

CSS

.container {
  width:100%;
  background:#fff;
  border:2px solid #0e2b3d;
  }
img {
  display: block; 
  width: 100%;
  height: 300px;
  }
.cover {
  object-fit: cover;
  }

Para consultar os códigos completos deste exemplo visite a página object-fit.html (abre em nova janela)

Nota: Mostramos exemplos com uso de imagens, mas não se esqueça que esta propriedade aplica-se a qualquer elemento substituído, tais como vídeos e canvas.

A propriedade CSS object-position

Por padrão, a propriedade object-fit insere a imagem de modo que o centro da imagem coincida com o centro do container. Isso fica claro nos exemplos mostrados.

A propriedade CSS object-position permite ao autor controlar o posicionamento da imagem no container e admite os mesmos valores da propriedade background-position.

No código CSS mostrado anteriormente, para alterar a posição da imagem no container poderíamos declarar:

CSS

...
.cover {
  object-fit: cover;
  object-position: center top;
  
  /* ou 
  object-position: 50px 120px; 
  ou 
  object-position: quaisquer coordenadas CSS; 
  */
  }

Suporte

Para suporte a estas duas propriedades nos navegadores, consulte caniuse (abre em nova janela).

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3