CSS-Objekt-Fit- und Objektpositionseigenschaften | Erklärt

Abgesehen von Styling -Bildern, Videos oder anderen Inhalten eines solchen Typs, die auf den Webseiten erscheinen. In CSS wurden einige Eigenschaften bereitgestellt, mit denen Sie diese Aufgaben mit großer und lediglich eine einzige Codezeile ausführen können. Wir haben diese Eigenschaften unten in Anspruch genommen.

1. Objekt-Fit-Eigenschaft
2. Objektposition Eigenschaft

Lassen Sie uns unten in ihre Tiefen eintauchen.

Objekt-Fit-Eigenschaft

Zum Zweck der Angabe, wie ein Video oder ein Bild, das auf einer Webseite angezeigt wird. Diese Eigenschaft beschreibt grundsätzlich, wie ein Element handelt, wenn sich die Größe des Containers ändert.

Syntax

Objektfit: Keine | füllen | Deckung | enthalten | scale-down | initial | erben;

Alle diese Parameter werden in der folgenden Tabelle erklärt.

Parameter	Beschreibung
keiner	Dieser Wert ärgert sich nicht um den Inhalt.
füllen	Dies ist ein Standardwert, mit dem der Inhalt seinen Container entweder durch Dehnen oder Drücken füllt.
Abdeckung	Es wird verwendet, damit der Inhalt seinen Container füllt und gleichzeitig sein Seitenverhältnis beibehält.
enthalten	Es wird auch verwendet, damit der Inhalt seinen Container durch Ausschneiden füllt und gleichzeitig sein Seitenverhältnis beibehält.
herunterskalieren	Dieser Wert erbt entweder Eigenschaften des Niemandswerts oder enthält einen Wert.
Initial	Dieser Wert legt die Eigenschaft auf ihren Standardwert fest.
erben	Es erbt die Eigenschaft von ihrem Vorgängerelement.

Lassen Sie uns die Objekt-Fit-Eigenschaft mit Hilfe von Beispielen weiter untersuchen.

Beispiel

Um die verschiedenen Werte der Objekt-Fit-Eigenschaft besser zu verstehen.

Html

Hier haben wir ein Bild im SRC -Attribut des Tags hinzugefügt.

Ausgang

Ein Bild wurde in die Webseite eingebettet.

Erforschen wir nun verschiedene Parameter der Objekt-Fit-Eigenschaft und sehen, was diese mit dem obigen Bild tun.

Füllen

Hier haben wir eine Breite und Höhe des Bildes festgelegt, und die Objekt-Fit-Eigenschaft hat den Füllwert bereitgestellt, der das Bild durch Drücken oder Strecken zu seinem Behälter passt.

img
Breite: 200px;
Höhe: 300px;
Objekt-Fit: Füllung;

Ausgang

Das Bild wurde gedrückt, um seinen Behälter zu füllen.

Abdeckung

Der Deckwert der Objekt-Fit-Eigenschaft schneidet die Seiten der Bilder und passt sie in den Container, wobei das Seitenverhältnis beibehält.

img
Breite: 200px;
Höhe: 300px;
Objekt-Fit: Deckung;

Ausgang

Der Deckungsparameter funktioniert ordnungsgemäß.

Enthalten

Abgesehen davon, dass wir dem Bild eine gewisse Breite und Höhe verleihen, haben wir die Objekt-Fit-Eigenschaft so eingestellt, dass das Bild im Container enthält und gleichzeitig das Seitenverhältnis erhalten bleibt.

img
Breite: 200px;
Höhe: 300px;
Objekt-Fit: enthalten;
Grenze: 5px fest blau;

Ausgang

Das Bild wurde erfolgreich abgeschnitten.

Herunterskalieren

Der Skalierungsparameter der Objekt-Fit-Eigenschaft erbt entweder Eigenschaften aus dem Abdeckparameter oder dem Parameter enthalten.

img
Breite: 200px;
Höhe: 300px;
Objekt-Fit: Skalierung;
Grenze: 5px fest blau;

Ausgang

Der Skalierungswert funktioniert ordnungsgemäß.

Objektposition Eigenschaft

Um anzugeben, wie ein Element (insbesondere ein Bild oder ein Video) entlang der horizontalen oder vertikalen Dimension in seinem Container positioniert werden sollte, wird die Objektpositioneigenschaft verwendet. Diese Eigenschaft wird immer zusammen mit der Objekt-Fit-Eigenschaft verwendet.

Syntax

Objektposition: Position | initial | erben;

Der Positionsparameter beschreibt die Position des Bildes oder Videos entlang der x- und y -Achsen. Es kann entweder eine Zeichenfolge wie links, rechts, Mitte oder eine Zahl in Pixel oder Prozentsatz sein.

Für ein besseres Verständnis ist hier ein Beispiel für die Objektposition Eigenschaft. Wir betrachten das in den obigen Beispielen verwendete Bild. Verwenden Sie den folgenden Code -Snippet zum Zwecke der Definition seiner Position zusammen mit der Änderung der Größe zur Anpassung an seinen Container.

CSS

img
Breite: 200px;
Höhe: 300px;
Objekt-Fit: enthalten;
Objektposition: 1% 90%;
Grenze: 5px fest blau;

Im obigen Code setzen wir die Objekt-Fit-Eigenschaft so ein, dass das Bild im Container abgeschnitten wird, während das Seitenverhältnis beibehält. In der Zwischenzeit wurden die oberen und linken Positionen des Bildes 1%zugewiesen, während die untere und die rechten Positionen 90%zugewiesen wurden. Zuletzt wurde der Rand des Behälters 5px mit einer soliden blauen Farbe verabreicht.

Ausgang

Die Objektpositionseigenschaft wurde erfolgreich implementiert.

Abschluss

CSS bietet Objektfit- und Objektpositioneigenschaften Dadurch werden die Dimensionen der Bilder festgelegt. Die Objekt-Fit-Eigenschaft beschreibt, wie ein Video oder ein Bild angepasst wird, um den Container anzupassen. In der Zwischenzeit definiert die Objektposition. Eigenschaft sein Behälter. Beide Eigenschaften zusammen mit verschiedenen Werten, die diese Renderung in diesem Beitrag durch Beispiele zeigen können.