CSS A propriedade posição do objeto
A propriedade CSS object-positioné usada para especificar como um <img> ou <video> deve ser posicionado em seu contêiner.
A imagem
Veja a seguinte imagem de Paris, que tem 400x300 pixels:
Em seguida, usamos object-fit: cover;para manter a proporção e preencher a dimensão dada. No entanto, a imagem será cortada para caber, assim:
Exemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Usando a propriedade posição do objeto
Digamos que a parte da imagem que é mostrada, não está posicionada como queremos. Para posicionar a imagem, usaremos a object-positionpropriedade.
Aqui vamos usar a object-positionpropriedade para posicionar a imagem de forma que o grande edifício antigo fique no centro:
Exemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Aqui vamos usar a object-positionpropriedade para posicionar a imagem de forma que a famosa Torre Eiffel fique no centro:
Exemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Objeto CSS-* Propriedades
A tabela a seguir lista as propriedades CSS object-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |