Propriedades de ajuste de objetos e objetos CSS | Explicado

Além de estilizar imagens, vídeos ou outro conteúdo desse tipo aparecendo nas páginas da web, designar essas pessoas que o ajuste e a posição certos são altamente cruciais ao projetar a estrutura de um site. Algumas propriedades foram fornecidas no CSS que permitem executar essas tarefas com grande facilidade e apenas uma única linha de código. Nós alistamos essas propriedades abaixo.

1. Propriedade de Objeto-Fit
2. Propriedade de posição de objetos

Vamos mergulhar em suas profundezas abaixo.

Propriedade de Objeto-Fit

Com o objetivo de especificar como um vídeo ou uma imagem que aparece em uma página da web será redimensionada para ajustar seu contêiner, a propriedade Object-Fit é usada. Esta propriedade descreve basicamente como um elemento agirá quando o tamanho do contêiner que a segura mudar.

Sintaxe

Objeto-ajuste: nenhum | preencher | capa | conter | escala para baixo | inicial | herdar;

Todos esses parâmetros são explicados na tabela abaixo.

Parâmetros	Descrição
nenhum	Este valor não redimensiona o conteúdo.
preencher	Este é um valor padrão que fará com que o conteúdo preencha seu contêiner, alongando -se ou espremendo.
cobrir	É usado para fazer com que o conteúdo preencha seu recipiente enquanto preserva sua proporção de aspecto.
conter	Também é usado para fazer com que o conteúdo preencha seu recipiente recorte enquanto preserva sua proporção de aspecto.
diminuir gradativamente	Este valor herda as propriedades do nenhum valor ou contém um valor.
inicial	Este valor define a propriedade para seu valor padrão.
herdar	Herda a propriedade do seu elemento antecessor.

Vamos explorar ainda mais a propriedade Object-Fit com a ajuda de exemplos.

Exemplo

Para entender melhor os vários valores da propriedade Object-Fit, primeiro incorpore uma imagem em nossa página da web usando HTML.

Html

Aqui adicionamos uma imagem no atributo src da tag.

Saída

Uma imagem foi incorporada na página da web.

Agora vamos explorar diferentes parâmetros da propriedade Object-Fit e ver o que eles fazem com a imagem acima.

Preencher

Aqui, estabelecemos alguma largura e altura da imagem e a propriedade Object-Fit recebeu o valor de preenchimento que fará com que a imagem se encaixe em seu contêiner, espremendo ou esticando.

img
Largura: 200px;
Altura: 300px;
Objeto-ajuste: preencher;

Saída

A imagem foi espremida para encher seu recipiente.

Cobrir

O valor da cobertura da propriedade Object-Fit cortará as laterais das imagens e a encaixará dentro do recipiente, mantendo sua proporção de aspecto.

img
Largura: 200px;
Altura: 300px;
Objeto-ajuste: capa;

Saída

O parâmetro de capa está funcionando corretamente.

Conter

Além de dar alguma largura e altura à imagem, definimos a propriedade de ajuste de objeto para conter, que prenderá a imagem no contêiner enquanto preserva sua proporção.

img
Largura: 200px;
Altura: 300px;
Objeto-ajuste: conter;
borda: 5px azul sólido;

Saída

A imagem foi cortada com sucesso.

Diminuir gradativamente

O parâmetro de redução da propriedade Object-Fit herda as propriedades do parâmetro de cobertura ou do parâmetro Contere.

img
Largura: 200px;
Altura: 300px;
Objeto-ajuste: escala para baixo;
borda: 5px azul sólido;

Saída

O valor da redução está funcionando corretamente.

Propriedade de posição de objetos

Para especificar como um elemento (particularmente uma imagem ou um vídeo) deve ser posicionado ao longo da dimensão horizontal ou vertical dentro de seu recipiente, a propriedade de posição de objetos é usada. Esta propriedade é sempre usada junto com a propriedade Object-Fit.

Sintaxe

Posição de objeto: Posição | inicial | herdar;

O parâmetro de posição descreve a posição da imagem ou vídeo ao longo dos eixos x e y. Pode ser uma corda como esquerda, direita, centro ou um número em pixels ou porcentagem.

Para uma melhor compreensão, aqui está um exemplo da propriedade de posição de objetos. Consideramos a imagem usada nos exemplos acima. Com o objetivo de definir sua posição, juntamente com a forma como será redimensionada para se ajustar ao seu contêiner, use o seguinte snippet de código.

CSS

img
Largura: 200px;
Altura: 300px;
Objeto-ajuste: conter;
Posição de objeto: 1% 90%;
borda: 5px azul sólido;

No código acima, estamos definindo a propriedade Object-Fit para conter, o que significa que a imagem será cortada dentro do contêiner, mantendo sua proporção de aspecto. Enquanto isso, as posições superior e esquerda da imagem foram atribuídas a 1%, enquanto as posições inferiores e direito foram atribuídas 90%. Por fim, a borda do recipiente recebeu 5px com uma cor azul sólida.

Saída

A propriedade de posição de objetos foi implementada com sucesso.

Conclusão

CSS fornece Propriedades de ajuste de objetos e posição de objetos que ajudam a definir as dimensões das imagens. A propriedade Object-Fit descreve como um vídeo, ou uma imagem será redimensionada para ajustar seu contêiner, enquanto isso, a propriedade de posição de objetos define como um elemento (particularmente uma imagem ou um vídeo) deve ser posicionado ao longo da dimensão horizontal ou vertical dentro seu recipiente. Ambas as propriedades, juntamente com vários valores que essas podem renderizar, foram demonstradas neste post através de exemplos.