Banner propaganda da DevMedia - Cursos de desenvolvimento web

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

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

topo