Propriedade CSS object-fit
- página anterior estilos de imagem CSS
- próxima página object-position CSS
CSS object-fit A propriedade é usada para definir como ajustar o tamanho do <img> ou <video> para se adaptar ao seu contêiner.
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
| Propriedade | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Propriedade CSS object-fit
CSS object-fit A propriedade é usada para especificar como ajustar o tamanho do <img> ou <video> para se adaptar ao seu contêiner.
Esta propriedade informa como o conteúdo deve ser preenchido de maneira diferente dentro do contêiner. Por exemplo, 'manter a proporcionalidade' ou 'estender e ocupar o máximo de espaço possível'.
Veja a seguir a foto de tulipanes do Porta de Flor de Shanghai, que é de 300x300 pixels:
Mas, se configurarmos a imagem acima como 200x300 pixels, ela vai parecer assim:
exemplo
img {
width: 200px;
height: 300px;
}
Vemos a imagem comprimida para se adaptar ao contêiner de 200x300 pixels e a proporcionalidade original da largura e da altura foi quebrada.
Se usarmos object-fit: cover;Isso cortará os lados da imagem, manterá a proporcionalidade da largura e da altura e preencherá o espaço da seguinte forma:
exemplo
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Outro exemplo
Aqui, temos duas imagens e queremos que elas preencham 50% da largura e 100% da altura da janela do navegador.
No exemplo a seguir, não usamos object-fitPortanto, ao ajustar o tamanho da janela do navegador, a proporcionalidade da largura e da altura da imagem será quebrada:
exemplo
No próximo exemplo, usamos object-fit: cover;Portanto, ao ajustar o tamanho da janela do navegador, a proporcionalidade da largura e da altura da imagem será mantida:
exemplo
Todos os valores da propriedade CSS object-fit
object-fit A propriedade pode aceitar os seguintes valores:
fill- Valor padrão. Ajuste o tamanho do conteúdo substituído para preencher a caixa de conteúdo do elemento. Se necessário, estique ou comprima o objeto para se adaptar ao objeto.contain- Ajuste o tamanho do conteúdo substituído para manter a proporcionalidade ao colocá-lo dentro da caixa de conteúdo do elemento.cover- Ajuste o tamanho do conteúdo substituído para manter a proporcionalidade da largura e da altura ao preencher todo o conteúdo da caixa do elemento. O objeto será cortado para se adaptar.none- Não ajuste o tamanho do conteúdo substituído.scale-down- Ajuste o tamanho do conteúdo como se não fosse especificado ou contido (o que resultará em尺寸 menores de objetos específicos)
Os seguintes exemplos demonstram object-fit valores possíveis da propriedade:
exemplo
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- página anterior estilos de imagem CSS
- próxima página object-position CSS
