Propriedade de posição do objeto CSS
Exemplo
Redimensione uma imagem para caber em sua caixa de conteúdo e posicione a imagem 5px da esquerda e 10% da parte superior dentro da caixa de conteúdo:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definição e uso
A object-position
propriedade é usada junto com object-fit para especificar como um <img> ou <video> deve ser posicionado com coordenadas x/y dentro de sua "própria caixa de conteúdo".
Valor padrão: | 50% 50% |
---|---|
Herdado: | sim |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | object .style.objectPosition="0 10%" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Sintaxe CSS
object-position: position|initial|inherit;
Valores de propriedade
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Páginas relacionadas
Tutorial CSS: ajuste de objeto CSS
Referência CSS: ajuste de objeto CSS
Referência HTML DOM: a propriedade objectPosition