object-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.

Summary

La propiedadobject-position determina el alineamiento del elemento dentro de la caja.

Valor inicial	`50% 50%`
Applies to	replaced elements
Heredable	yes
Percentages	refer to width and height of element itself
Valor calculado	como se especifica
Animation type	a repeatable list

Sintaxis

css

/* <position> valores */object-position: 100px 50px;/* Valores globales */object-position: inherit;object-position: initial;object-position: unset;

Valores

<position>: <position>, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.

Sintaxis formal

object-position =
<position>

<position> =
<position-one>|
<position-two>|
<position-four>

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<length-percentage> =
<length>|
<percentage>

Ejemplo

Ejemplo de HTML

html

<img src="mdn.svg" alt="MDN Logo" /><img src="mdn.svg" alt="MDN Logo" />

Ejemplo de CSS

css

img {  width: 300px;  height: 250px;  border: 1px solid black;  background-color: silver;  margin-right: 1em;  object-fit: none;}#object-position-1 {  object-position: 10px;}#object-position-2 {  object-position: 100% 10%;}