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

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

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

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

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

Compartilhe essa matéria com seus amigos