Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property.


/* <position> values */
object-position: center top;
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;


From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.

Note: The position can be set so that the replaced element is drawn outside its box.

Formal syntax


<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

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



Here we see HTML that includes two <img> elements, each displaying the MDN logo.

<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>


The CSS includes default styling for the <img> element itself, as well as separate styles for each of the two images.

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%;

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.



Specification Status Comment
CSS Images Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Initial definition.
Initial value50% 50%
Applies toreplaced elements
Percentagesrefer to width and height of element itself
Computed valueas specified
Animation typerepeatable list of simple list of length, percentage, or calc
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
object-positionChrome Full support 31Edge Full support 16Firefox Full support 36IE No support NoOpera Full support 19
Full support 19
Full support 11.6
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 36Opera Android Full support 19
Full support 19
Full support 12
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android ?


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also