object-position

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 | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ 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 Image Values and Replaced Content Module Level 4
Die Definition von 'object-position' in dieser Spezifikation.
Arbeitsentwurf The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3
Die Definition von 'object-position' in dieser Spezifikation.
Anwärter Empfehlung Initial definition

Browser compatibility

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,