Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

Summary

The object-position property determines the alignment of the replaced element inside its box.

Initial value50% 50%
Applies toreplaced elements
Inheritedyes
Percentagesrefer to width and height of element itself
Mediavisual
Computed valueas specified
Animation typea repeatable list of , a simple list of , a length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

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

Values

<position>
Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

Formal syntax

<position>

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

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

Example

HTML Content

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

CSS Content

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  margin-right: 1em;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 20% 10%;
}

Output

Specifications

Specification Status Comment
CSS Image Values and Replaced Content Module Level 4
The definition of 'object-position' in that specification.
Working Draft The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 31.0 36 (36) No support 11.60-o
19.0
10.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4.4 36 (36) No support 11.5-o
24
No support

[1] WebKit Nightly fixed in bug 122811.

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: benknight, yisibl, mrstork, Sebastianz, fscholz, Dholbert, teoli
 Zuletzt aktualisiert von: benknight,