A propriedade CSS object-fit

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

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).

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro
ou
vá para a página de entrada nos sites dos livros.

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass