Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Eigenschaft object-position bestimmt  die Ausrichtung des Elements in seiner Box.

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

/* Globale Werte */
object-position: inherit;
object-position: initial;
object-position: unset;

Initialwert50% 50%
Anwendbar aufersetzte Elemente
VererbtJa
Prozentwertebeziehen sich auf Breite und Höhe des Elements
Medienvisuell
Berechneter Wertwie angegeben
Animationstyprepeatable list of simple list of length, percentage, or calc
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

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>

wobei
<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> ] ]

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

Example

HTML content

<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"/>

CSS content

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

Output

Specifications

Specification Status Comment
CSS Images Module Level 4
Die Definition von 'object-position' in dieser Spezifikation.
Arbeitsentwurf The from-image and flip keywords have been added.
CSS Images Module Level 3
Die Definition von 'object-position' in dieser Spezifikation.
Anwärter Empfehlung Initial definition

Browser compatibility

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 31.0 36 (36) Nicht unterstützt 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) Nicht unterstützt 11.5-o
24
Nicht unterstützt

[1] WebKit Nightly fixed in bug 122811.

See also

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Craeckerffm
Zuletzt aktualisiert von: Craeckerffm,