Ajuste ao objeto - CSS-Tricks

A object-fitpropriedade define como um elemento responde à altura e largura de sua caixa de conteúdo. Destina-se a imagens, vídeos e outros formatos de mídia incorporáveis em conjunto com a object-positionpropriedade. Usado sozinho, object-fitpermite cortar uma imagem embutida, dando-nos um controle refinado sobre como ela espreme e estica dentro de sua caixa.

object-fit pode ser definido com um destes cinco valores:

fill: este é o valor padrão que estica a imagem para caber na caixa de conteúdo, independentemente de sua proporção.
contain: aumenta ou diminui o tamanho da imagem para preencher a caixa, preservando sua proporção.
cover: a imagem irá preencher a altura e largura de sua caixa, mais uma vez mantendo sua proporção, mas freqüentemente cortando a imagem no processo.
none: a imagem irá ignorar a altura e largura do pai e manter seu tamanho original.
scale-down: a imagem irá comparar a diferença entre nonee containpara encontrar o menor tamanho de objeto de concreto.

É assim que podemos definir essa propriedade:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Como a segunda imagem tem uma proporção de aspecto diferente da imagem original à esquerda, ela se estenderá para fora da área de sua caixa de conteúdo, cortando as partes superior e inferior da imagem.

É importante notar que, por padrão, a imagem é centralizada em sua caixa de conteúdo, mas isso pode ser alterado com a object-positionpropriedade.

Demo

A demonstração abaixo mostra cinco exemplos detalhando como podemos querer que uma imagem se encaixe em uma caixa de conteúdo, que às vezes é menor ou maior que sua largura original (redimensione o navegador para ter uma ideia melhor de como isso pode funcionar):

Veja Pen object-fit de Robin Rendle (@robinrendle) no CodePen.

Se o conteúdo da imagem não preencher a caixa de conteúdo por qualquer motivo, o espaço não preenchido mostrará o fundo do elemento, neste caso um fundo cinza claro.

Suporte de navegador

É importante notar que o iOS 8-9.3 e o Safari 7-9.1 são object-fitpropriedade, mas não object-position.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.