object-position CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die object-position CSS Eigenschaft gibt die Ausrichtung der Inhalte des ausgewählten ersetzten Elements innerhalb des Elementrahmens an. Bereiche des Rahmens, die nicht vom Objekt des ersetzten Elements abgedeckt werden, zeigen den Hintergrund des Elements.
Sie können anpassen, wie die intrinsische Größe des Objekts des ersetzten Elements (das heißt seine natürliche Größe) angepasst wird, um innerhalb des Elementrahmens 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
/* 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>-
Ein 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 Rahmens 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 umfasst, von denen jedes das MDN-Logo anzeigt.
<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 Standard-Styling für das <img>-Element selbst sowie separate Stile für jedes der beiden Bilder.
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 wird mit seinem linken Rand 10 Pixel vom linken Rand des Elementrahmens eingerückt positioniert. Das zweite Bild wird mit seinem rechten Rand bündig am rechten Rand des Elementrahmens positioniert und befindet sich 10 % der Höhe des Elementrahmens nach unten.
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| 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.