Propriedade object-position CSS
- Página anterior Propriedade object-fit CSS
- Próxima página Máscaras CSS
CSS object-position a propriedade é usada para especificar a posição de <img> ou <video> dentro de seu contêiner.
imagem
veja a imagem abaixo, proveniente de Wuhan, com tamanho de 600x400 pixels:
A seguir, utilizaremos object-fit: cover; para manter a proporção de largura e altura e preencher o tamanho fornecido. No entanto, a imagem será cortada para se ajustar, conforme mostrado:
Exemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
}
a propriedade object-position
Supondo que a parte da imagem exibida não seja o local desejado. Para posicionar a imagem, utilizaremos object-position propriedade.
Aqui, utilizaremos object-position a propriedade para posicionar a imagem, para que o antigo edifício esteja no centro:
Exemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Aqui, utilizaremos object-position Propriedades para posicionar a imagem, para que o icônico Pátio do Palácio Imperial esteja à direita:
Exemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
Propriedades CSS object-*
A tabela a seguir lista as propriedades CSS object-*:
| Propriedade | Descrição |
|---|---|
| object-fit | Especificar como <img> ou <video> devem ser ajustados de tamanho para se adaptarem ao seu contêiner. |
| object-position | Especificar como <img> ou <video> devem ser posicionados dentro de sua 'caixa de conteúdo' usando coordenadas x/y. |
- Página anterior Propriedade object-fit CSS
- Próxima página Máscaras CSS
