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 ⁨Januar 2020⁩.

Die object-position CSS Eigenschaft legt die Ausrichtung der Inhalte des ausgewählten ersetzten Elements innerhalb des Box des Elements fest. Bereiche der Box, die nicht vom Objekt des ersetzten Elements abgedeckt sind, zeigen den Hintergrund des Elements an.

Sie können anpassen, wie die inhärente Größe des Objekts des ersetzten Elements (also seine natürliche Größe) eingestellt wird, um in die Box des Elements zu passen, indem Sie die object-fit Eigenschaft verwenden.

Probieren Sie es aus

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/moon.jpg" />
</section>

#example-element {
  height: 250px;
  width: 250px;
  object-fit: none;
  border: 1px solid red;
}

Syntax

css

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

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

Werte

<position>: Von einem bis vier Werte, die die 2D-Position des Elements definieren. Relative oder absolute Offsets können verwendet werden.

Hinweis: Die Position kann so eingestellt werden, dass das ersetzte Element außerhalb seines Box gezeichnet wird.

Formale Definition

Anfangswert	`50% 50%`
Anwendbar auf	ersetzte Elemente
Vererbt	Ja
Prozentwerte	beziehen sich auf Breite und Höhe des Elements
Berechneter Wert	wie angegeben
Animationstyp	a repeatable list

Formale Syntax

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>

Beispiele

Positionierung von Bildinhalten

HTML

Hier sehen wir HTML, das zwei <img> Elemente enthält, die jeweils das MDN-Logo anzeigen.

html

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

Das CSS enthält Standardstile für das <img> Element selbst sowie separate Stile für jedes der beiden Bilder.

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

Das erste Bild ist mit seiner linken Kante 10 Pixel von der linken Kante des Box des Elements entfernt positioniert. Das zweite Bild ist mit seiner rechten Kante bündig an der rechten Kante des Box des Elements positioniert und befindet sich 10% von der Höhe des Box des Elements entfernt.

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 3 # the-object-position

Browser-Kompatibilität

Siehe auch

Andere bildbezogene CSS-Eigenschaften: object-fit, image-orientation, image-rendering, image-resolution.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden