DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft object-position wird verwendet, um jedes ausgewählte ersetzte Element (z. B. ein <img>) innerhalb des ihn enthaltenden Feldes auszurichten.
img {
object-position: right bottom;
}
<img>-Element wird mit object-position: right bottom; am unteren rechten Rand seines Elternelements ausgerichtet.Obwohl object-position am häufigsten bei <img>-Elementen verwendet wird, kann es auch für andere Arten von ersetzten Elementen wie <iframe>, <video> und <embed> verwendet werden.
object-position ist Teil der CSS Images Module Level 3-Spezifikation.
Syntax
object-position: <position>where <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> ] ]where <length-percentage> = <length> | <percentage>Das ist nur eine wirklich lange Art zu erklären, dass wir Schlüsselwörter oder Längenwerte verwenden können, um die Ausrichtung eines Elements innerhalb eines Containers festzulegen.
Werte
/* Positional values */
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;Beispiele
Betrachten wir einige verschiedene Beispiele für die Funktionsweise der object-position-Eigenschaft.
Grundlegende Verwendung
Details
Das obige Beispiel demonstriert, wie object-position ein Bildelement relativ zu seinem Elternelement ausrichtet, wenn das Bild kleiner als das Elternelement ist. Beachten Sie erneut die Verwendung von object-fit: none, um object-position zum Funktionieren zu bringen.
Bild übersteigt den Container
Details
Diese Demo zeigt, wie sich ein Bildelement, das größer als sein Elternelement ist, bei verschiedenen object-position-Werten verhält.
Andere Arten von ersetzten Inhalten
Details
Dieses Beispiel zeigt object-position, das mit anderen Arten von ersetzten Inhalten verwendet wird, einschließlich <video> und <iframe>.
Tricks!
Responsives Zuschneiden von Bildern
Das folgende Beispiel hat ein einfaches responsives Layout mit einem Bild über dem Text. Vielleicht ist der Mann auf diesem Bild das Thema des Artikels, und wenn die Bildschirmgröße kleiner wird, möchten wir den Fokus auf dieses Thema beibehalten. object-position wird hier verwendet, um diesen Fokus beizubehalten und das Bild an einem bestimmten Haltepunkt mit object-position: left bottom zuzuschneiden.
Mosaik-Gesichter
Abgesehen von der Fokusausrichtung sind die praktischen Anwendungen von object-position begrenzt. Es ist jedoch eine Eigenschaft, mit der Sie bei der Seitenlayoutgestaltung und -design etwas kreativ werden können.
Stilisierte Rahmen
Eine weitere coole Sache, die wir tun können, ist, den Negativraum des übergeordneten Containers zu nutzen, um gefälschte Rahmen zu zeichnen. Wir setzen eine Hintergrundfarbe auf den übergeordneten Container, fügen ein Bild ein, das kleiner als der Container ist, und verwenden dann object-position, um das Bild auszurichten. Was übrig bleibt, sieht irgendwie wie ein Rahmen aus. Es wird super interessant, wenn wir viele Container zusammenstellen, da es so aussieht, als ob eine Linie zwischen ihnen gezogen wird, was nette Muster erzeugen kann.
Browser-Unterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 36 | Nein | 79 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4.3-4.4.4 | 10.0-10.2 |
function example() {
element.innerHTML = „what the hell?“;
}
Die Browserunterstützung ist für Safari falsch, da diese
object-positionüberhaupt nicht unterstützt.http://caniuse.com/#search=object-position
Danke Marek, ich habe den Beitrag jetzt mit den richtigen Informationen aktualisiert.
Safari 10 unterstützt object-position
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
(Auch der Codepen ist jetzt eine 404)
Safari 10 (macOS und iOS) unterstützt jetzt sowohl
object-fitals auchobject-positionkorrekt.Ich bin etwas spät dran, aber ich habe eine Ergänzung: Das dritte Beispiel sollte
object-position: 100% 100%(statt 100% 150%) heißen, während das vierteobject-position: 0 100%(statt 0 150%) heißen sollte.Keine Erwähnung, dass man dieselbe Notation wie bei background-position verwenden kann
‘object-position: left bottom;’
Ich habe ein Vollbildbild auf meiner Website. Ich möchte, dass es sich basierend auf der Bildschirmauflösung/-verhältnis anpasst, aber ich habe einige Einschränkungen
Ich muss immer den rechten Teil des Bildes sehen (nur das zuschneiden, was
links ist)
Ich kann die Höhe nicht zuschneiden.
Ich habe versucht, ohne Erfolg
text-indent: -100%;
object-position: right;
object-fit: contain;
aber keine Kombination funktioniert.
Vielen Dank für jede Hilfe