So verwenden Sie CSS-Objektfit und Objektposition

Kernpunkte

• CSS -Eigenschaften object-fit und object-position können verwendet werden, um die Größe der eingebetteten Bilder und andere Ersatzelemente zu ändern, ähnlich wie die CSS -Eigenschaften background-size und background-position für Hintergrundbilder.
Das Attribut
• object-fit bietet eine Vielzahl von Optionen, um zu steuern, wie das Bild in einem bestimmten Bereich angezeigt wird, und kann bei Bedarf einen Teil des Bildes ausblenden. Dies ist nützlich, um Bilder ohne Verzerrung an einen bestimmten Raum anzupassen.
Das Attribut
• object-fit enthält fünf Hauptschlüsselwortwerte: cover, contain, none, scale-down, fill und
. Diese Werte bestimmen, wie das Bild in seinem Container angezeigt wird, um Bereiche abzudecken, sich an Bereiche anzupassen, die natürliche Größe aufrechtzuerhalten, Inhaltsboxen zu passen oder zu füllen.
• object-position 50% 50% Attribut steuert die Position eines Bildelements in seinem Inhaltsfeld. Der Standardwert ist
, das das Image -Center mit dem Inhaltsbox -Zentrum ausrichtet, aber mit einer Reihe von Schlüsselwortwerten oder Längenwerten angepasst werden kann.
• object-fit Während object-position und
für die Behandlung von Ersatzelementen ausgelegt sind, werden sie am häufigsten verwendet, um Bilder ohne Verzerrung an bestimmte Räume anzupassen. Sie werden in allen modernen Browsern unterstützt, aber nicht im Internet Explorer.

background-size cs Die Eigenschaften background-position und object-fit ermöglichen es uns, ähnliche Operationen auf eingebetteten Bildern (und anderen Ersatzelementen wie Videos) auszuführen. In diesem Artikel wird ein Bild mit object-position in einen bestimmten Raum eingerichtet und wie object-fit object-position die Position eines Bildes in diesem Bereich genau gesteuert.

Verwendung von

object-fit Manchmal kann das Bild zu groß sein, um den gewünschten Raum anzupassen. In der Vergangenheit mussten wir Bilder in einem Image -Editor aufnehmen oder Bilder ändern, indem wir Breiten- und/oder Höhenbeschränkungen festlegen (dies ist nicht die perfekte Wahl), oder eine Art komplexes Anbaus durchführen oder vielleicht auf die Verwendung von Hintergrundbildern zurückgreifen (Hintergrundbilder ( Wenn Bilder nicht nur zur Dekoration dienen, was schade ist).

Die Funktion des Attributs auf einem Bild ähnelt der von

auf einem Hintergrundbild: Es bietet eine Vielzahl von Optionen, um zu steuern, wie das Bild in einem bestimmten Bereich angezeigt wird, und kann einige von ausblenden Der Inhalt des Bildes bei Bedarf. Dieser angegebene Bereich kann eine feste Breite und Höhe haben, oder es kann sich um einen reaktionsfähigeren Raum handeln, wie z. object-fit Wie man arbeitet background-size

Jedes HTML -Element hat ein eigenes "Inhaltsfeld", das den vom Element besetzten Raum darstellt. Standardmäßig entspricht die Inhaltsbox des Bildes seiner natürlichen Größe.

Wenn wir verschiedene Breiten und/oder Höhen auf das Bild anwenden, ändern wir tatsächlich die Größe des Inhaltsfelds. Wenn sich die Größe des Inhaltsfelds ändert, füllt das Bild weiterhin das Inhaltsfeld. Wenn wir also ein Bild von 300px x 300px haben und seine Größe auf 300px x 200px einstellen, erscheint das Bild deformiert.

Die Eigenschaft

object-fit bietet eine Vielzahl von Optionen, um Bilder im Inhaltsfeld der Größe der geänderten Größe anzuzeigen. Wir können einen Teil des Bildes verbergen oder das Bild zwingen, seine Inhaltsbox nur teilweise zu füllen, damit das Bild vollständig sichtbar ist und nicht verformt.

Einstellungen

Um im Detail zu veranschaulichen, wie die Eigenschaften object-fit funktionieren, legen wir ein Bild mit einem Netzlayout in ein DIV zentriert. Der DIV verfügt über einen braunen Hintergrund und eine gepunktete Grenze wird von einem ::before Pseudo-Element bereitgestellt, was uns hilft, zu verstehen, welche Änderungen mit dem Bild passiert sind.

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: Setup

Für unsere Bilddemonstration werden wir das folgende Bild (OIA, Santorini, Griechenland) verwenden. Die natürlichen Abmessungen sind 400px x 600px.

Unser Bild ist viel größer als unser DIV und wenn wir das Bild in das Div legen, überflutet es wie unten gezeigt.

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: Setup2

Unser Ziel ist es, zu verhindern, dass das Bild seinen Container wie diesen überfließt und es bequem macht, den Behälter anzupassen, und object-fit hilft uns dabei, dies zu erreichen.

Wenn wir ein Hintergrundbild verwenden, können wir background-size: cover etwas Ähnliches festlegen, und das Hintergrundbild wird auf den Bereich des Containers beschränkt. Wie wir jedoch sehen können, müssen wir zunächst die Breite und Höhe des Bildinhaltsboxs definieren, damit sie sich von den natürlichen Dimensionen unterscheidet. Im folgenden Beispiel begrenzen wir die Breite und Höhe des Bildes auf 100%, so dass der Inhaltsfeld der Größe des Container -Divs entspricht: object-fit

img {
  width: 100%;
  height: 100%;
}

so sieht es aus.

Ein Beispiel für SitePoint (@sinepoint) auf CodePen:

Objekt-Fit: Setup3

Das Bild und seine Inhaltsboxen passen jetzt perfekt zum Behälter, das Bild ist jedoch stark deformiert. Hier kommt die Magie von

ins Spiel. Lassen Sie uns sehen, was sie bieten kann. object-fit

Verwenden Sie adap Bilder an Container object-fit Das Attribut

object-fit enthält fünf Hauptschlüsselwortwerte, um festzustellen, wie ein Bild in seinem Container angezeigt wird. Zwei der Schlüsselwörter - cover und contain - führen die gleiche Funktion wie ihre background-size Gegenstücke aus.

object-fit: cover

cover Wert erzwingt das Bild, um den Containerbereich vollständig abzudecken, und zeigt so viele Bilder wie möglich ohne Verzerrung an:

img {
  width: 100%;
  height: 100%;
}

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: Cover

Da das Bild sehr hoch ist, sehen wir seine volle Breite, aber wir können seine volle Höhe nicht sehen, wie im folgenden Bild gezeigt.

cover Werte sind wahrscheinlich der praktischste Wert und werden in den meisten Fällen bevorzugt.

Was hier erwähnenswert ist, ist die Position des Bildes. Im Gegensatz zu background-position (Standard ist 0 0, das das Hintergrundbild aus der oberen linken Ecke des Containers lokalisiert) ist der Standard object-position 50% 50%, der das Bild in seinem Inhaltsfeld zentriert. Wenn wir uns die Eigenschaft object-position später ansehen, lernen wir, wie Sie angeben, welcher Teil des Bildes sichtbar ist.

object-fit: contain

contain Wert erzwingt das Bild, um sich vollständig an das Inhaltsfeld anzupassen, aber nicht verzerrt. Das Bild behält sein natürliches Seitenverhältnis bei, so dass es seinen Behälter nicht füllt:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: Enthält

Es sieht so aus, als ob wir das gleiche Ergebnis wie oben erzielen können, indem wir einfach height: 100% auf dem Bild einstellen. Dies ist jedoch nicht der Fall, da das Bild links anstatt zu zentrieren ist, was die Standardeinstellung für object-fit ist. In Kombination mit object-position, object-fit gibt es mehr Optionen, wie Bilder in Containern positioniert sind.

object-fit: none

none Eigenschaften ermöglichen es, dass das Bild in seiner natürlichen ursprünglichen Größe bleibt. Es sind nur teilweise Bilder sichtbar, die sich an die in der Größenordnung anpassende Inhaltsbox der Größe anpassen können.

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: None

im Gegensatz zu object-fit: cover sind unsere Bilder nicht gezwungen, entlang mindestens einer Achse vollständig sichtbar zu sein. Das Originalbild ist breiter und größer als das Inhaltsbox, sodass es in beide Richtungen überläuft, wie im folgenden Bild gezeigt.

Beachten Sie erneut, dass die Mitte des Bildes standardmäßig mit der Mitte der Inhaltsbox ausgerichtet ist.

Beachten Sie auch, dass object-fit: none nicht bedeutet object-fit nichts getan hat. Wie wir gesehen haben, macht es viele Dinge im Vergleich dazu, dass das object-fit überhaupt nicht eingestellt ist. (Zur Erinnerung überprüfen Sie bitte die Situation nach dem Löschen von object-fit: none im obigen Beispiel.)

object-fit: scale-down

Die Attribute sind entweder die gleichen wie

oder die gleichen wie scale-down. Es wählt none aus, damit das Bild kleinere Ergebnisse anzeigt. contain Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objekt-Fit: scale-down

In unserem aktuellen Beispiel wird dies offensichtlich ausgewählt, da unser Container

kleiner ist als

Bild. Wenn unser Container contain größer als ist, dominiert und das Bild hält seine natürliche Größe bei, anstatt den Behälter in eine Richtung zu füllen, die Sie in dieser Codepen -Demo sehen können. none

Wenn wir den Wert object-fit: fill in der Demo in

ändern, gibt es keine Einstellung

. Dies liegt daran, dass das Bild standardmäßig sein Inhaltsfeld füllt, unabhängig davon, welche Größe festgelegt ist. object-fit fill Ein Beispiel für SitePoint (@sinepoint) auf CodePen: object-fit Objekt-Fit: FILL

Da die Eigenschaft das Bild verformen kann, ist es in den meisten Fällen möglicherweise nicht die beste Wahl.

fill ohne Container

verwenden Im obigen Beispiel haben wir object-fit verwendet, um das Bild im Div -Behälter zu ändern, aber das Prinzip, das wir in der Praxis gesehen haben, funktioniert genauso gut ohne diesen Container. Was zählt, ist die Größe des Bildinhaltsfelds und wie das Bild in seinem Inhaltsfeld angezeigt wird.

Zum Beispiel können wir das folgende CSS ohne umgebende Div:

auf das Bild anwenden: object-fit

Die Ergebnisse sind in der nachstehenden Codepen -Demonstration gezeigt.

img {
  width: 100%;
  height: 100%;
}

Ein Beispiel für SitePoint (@sinepoint) auf CodePen:

Objekt-Fit: No Container

Versuchen Sie, die Werte auf dem Attribut zu überschreiben, zu füllen, zu schrumpfen und keine im obigen Beispiel, um das Verhalten jedes Werts zu sehen. Das Ergebnis ist das gleiche wie das Ergebnis des Bildes auf 100% Breite und Höhe und im Div -Set auf 300px x 300px.

object-fit In reaktionsschnelles Layout

verwendet object-fit Eigenschaften können am nützlichsten sein, wenn die Größe des angegebenen Bereichs des Bildes auf die Größe des Browser -Ansichtsfensters reagiert. Die folgende Demonstration weist unsere Bilder einem bestimmten, flexiblen Gitterbereich zu:

object-fit Ein Beispiel für SitePoint (@sinepoint) auf CodePen:

Objektfit in einem reaktionsschnellen Bereich

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Wenn sich der Ansichtsfenster und der Gitterbereich erweitern und schrumpfen, stellt der Wert cover sicher, dass sich das Bild immer perfekt an seinen Netzbereich anpasst und den sichtbaren Teil des Bildes so ändert, dass es nie verzerrt. (Sehen Sie sich die Demo in vollem Seitenansicht an, um die besten Ergebnisse zu erzielen.)

Um mehr über Netzbereiche zu erfahren, lesen Sie unseren CSS -Gittervorbereitungshandbuch.

Verwenden Sie object-position Bildposition

Wie verwendet background-position, um die Position des Hintergrundbildes in seinem Container festzulegen, steuert das Attribut object-position die Position der Bildelemente in seinem Inhaltsfeld.

Wie wir sehen können, ist der Standardwert von object-position 50% 50%, was bedeutet, dass das Image -Zentrum mit dem Content -Box -Zentrum an den horizontalen und vertikalen Achsen ausgerichtet ist. Wir können es mit einer Reihe von Schlüsselwortwerten (oben, unten, links, rechts, Mitte) oder mit Längenwerten (wie PX, EM oder %) oder beides ändern.

Angenommen, wir möchten jetzt unser Bild aus der unteren rechten Ecke positionieren. Wir können das Schlüsselwort right bottom oder den prozentualen Wert 100% 100%:

verwenden

img {
  width: 100%;
  height: 100%;
}

Beispiele für SitePoint (@sinepoint) auf CodePen: Objektposition 1: Schlüsselwörter

Das folgende Bild zeigt die aktuelle Position unseres Bildes.

Sie können im obigen Beispiel Targeting -Schlüsselwörter verwenden, um zu sehen, wie sie funktionieren, sowie die Schlüsselwörter object-fit, aber die Ergebnisse sollten leicht vorherzusagen sein.

Wir können das Bild auch mit Einheiten wie Pixel oder EM von seinem Behälter ausgleichen. Zum Beispiel:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objektposition 2: Einheiten

Wir können ähnliche Offsets aus der unteren rechten Ecke erstellen, indem wir Einheiten und Schlüsselwörter kombinieren, wie unten gezeigt:

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Ein Beispiel für SitePoint (@sinepoint) auf CodePen: Objektposition 3: Einheiten und Schlüsselwörter

Wir haben gesehen, dass wir Prozentsätze verwenden können, um Bilder im Inhaltsfeld zu finden. Wie beim Attribut background-position kann die Verwendung von Prozentsätzen mit object-position etwas verwirrend sein. object-position 50% 50% bedeutet, dass die Bildmitte mit der Mitte des Inhaltsfelds auf den horizontalen und vertikalen Achsen ausgerichtet ist.

Wenn wir object-position auf 20% 40% festlegen, bedeutet dies, dass eine vertikale Linie auf 20% der linken Seite des Bildes mit einer vertikalen Linie mit 20% der linken Seite des Inhaltsboxs und einer Horizontalen zusammenfällt Leitung von 40% der Oberseite des Bildes fällt mit einer horizontalen Linie mit 40% der Oberseite des Inhaltsfelds zusammen, wie in der folgenden Abbildung gezeigt.

Wir können dies in der CODEPEN -Demo unten sehen.

Beispiele für SitePoint (@sinepoint) auf CodePen: Objektposition 4: Prozentsätze

Schlussfolgerung

object-fit Attribute sollen mit jeder Art von Ersatzelementen wie Bildern, Videos, Iframes und eingebetteten Objekten verwendet werden. Wie nützlich es ist, Elemente wie Videos an definierte Bereiche anzupassen, in denen einige Elemente versteckt werden können, ist wahrscheinlich eine Frage, die erörtert wird, aber es besteht kein Zweifel, dass es praktikable Anwendungsfälle gibt. Eine bessere Option könnte darin bestehen, die Breite des Iframe auf die width: 100% des freien Speicherplatzes einzustellen und dann die aspect-ratio -Spertage zu verwenden, um seinen Anteil aufrechtzuerhalten.

häufigere Situationen sind die Notwendigkeit, das Bild an einen bestimmten Raum anzupassen, daher ist object-fit sehr nützlich, um das Bild ohne Verzerrung an den Raum anzupassen (auch wenn ein Teil des Bildes versteckt sein muss).

Um mehr über object-fit und object-position zu erfahren, lesen Sie die MDN -Seite für diese Eigenschaften:

• [Objekt-Fit] (Der Link muss durch MDN-Objekt-Fit-Link ersetzt werden)
• [Objektposition] (Die Verbindung muss durch die Link MDN-Objektposition ersetzt werden)

, wie oben erwähnt, lohnt es schließlich, die Eigenschaften object-fit und object-position mit den Eigenschaften background-size und background-position zu vergleichen, die viele Ähnlichkeiten aufweisen. Sehen Sie, wie Sie CSS background-size und background-position verwenden, um mehr über sie zu erfahren.

FAQs (FAQs) über CSS object-fit object-position und Eigenschaften

Was ist der Unterschied zwischen object-fit object-position und

in CSS?

Die Eigenschaften object-fit und object-position in den object-fit cs werden verwendet, um den Inhalt des Ersatzelements wie ein Bild oder Video zu steuern. background-size Attribut definiert, wie ein Element auf seine Inhaltsboxhöhe und -breite reagiert. Es ist ähnlich wie fill in CSS, funktioniert aber mit Ersatzelementen. Es hat fünf Werte: contain, cover, none, scale-down,

und

. object-position background-position Andererseits bestimmt das

-Merkmal, wo sich das Ersatzelement in seiner Box befindet. Es ähnelt

, funktioniert aber mit Ersatzelementen. Es braucht zwei Werte, um die X- und Y -Koordinaten darzustellen, die die Position des Elements festlegen. object-fit

Wie verwendet ich

Attribut zur Größe des Bildes? object-fit

img {
  width: 100%;
  height: 100%;
}

Eigenschaften können verwendet werden, um zu steuern, wie das Bild angepasst werden soll, um seinen Behälter anzupassen. Hier ist ein Beispiel:

<🎜> In diesem Beispiel wird das Bild geändert, um die gesamte Breite und Höhe seines Behälters abzudecken und gleichzeitig das Seitenverhältnis beizubehalten. Wenn das Seitenverhältnis des Bildes nicht mit dem Seitenverhältnis des Containers übereinstimmt, wird das Bild beschnitten. <🎜>

Kann ich object-position mit Hintergrundbild verwenden?

Nein, object-position Attribute können nicht mit Hintergrundbildern verwendet werden. Es funktioniert nur mit Ersatzelementen wie img, video oder embed. Für Hintergrundbilder können Sie stattdessen das background-position -attribut verwenden.

Wie funktioniert der Wert

object-fit contain?

Der Wert

object-fit der Eigenschaft contain verändert den Inhalt, um das Inhaltsfeld anzupassen und gleichzeitig das Seitenverhältnis beizubehalten. Wenn sein Seitenverhältnis nicht mit dem Seitenverhältnis des Inhalts übereinstimmt, ist der gesamte Inhalt sichtbar, aber es gibt möglicherweise noch einen Platz in der Inhaltsbox.

Was ist die Funktion des Werts

object-fit? none Der Wert

des object-fit -attributs bedeutet, dass der Inhalt die Höhe und Breite des Inhaltsfelds ignoriert. Es wird seine ursprüngliche Größe behalten, die dazu führen kann, dass der Inhalt beschlagnahmt wird, wenn er größer ist als die Inhaltsbox. none

Wie verwendet ich

Mittelbild? object-position

Sie können die Eigenschaft

verwenden, um das Bild in seiner Inhaltsbox zu zentrieren. Hier ist ein Beispiel: object-position

img {
  width: 100%;
  height: 100%;
}

In diesem Beispiel befindet sich das Bild in der Mitte seiner Inhaltsbox.

Kann ich prozentuale Werte in

verwenden? object-position

Ja, Sie können prozentuale Werte im Attribut

verwenden. Diese Werte geben den Standort des Inhalts relativ zum Inhaltsfeld an. Zum Beispiel findet object-position Inhalt in der oberen linken Ecke des Inhaltsboxs, während 0% 0% in der unteren rechten Ecke findet. 100% 100%

Was passiert, wenn ich den Wert

nicht angibt? object-position

Wenn Sie den Wert

nicht angeben, ist der Standardwert object-position, der den Inhalt in seinem Inhaltsfeld zentriert. 50% 50%

Kann ich gleichzeitig

und object-fit verwenden? object-position

Ja, Sie können die Eigenschaften

und object-fit verwenden, um die Größe und Position des Inhalts zu steuern. Hier ist ein Beispiel: object-position

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

In diesem Beispiel wird das Bild geändert, um seine Inhaltsbox zu überschreiben und zu zentrieren.

Alle Browser unterstützen die Eigenschaften

und object-fit? object-position

Alle modernen Browser, einschließlich Chrom, Firefox, Safari und Edge, unterstützen die Eigenschaften

und object-fit weit verbreitet. Internet Explorer unterstützt sie jedoch nicht. object-position

Die CodePen -Links in allen Code -Beispielen müssen durch den tatsächlichen Link ersetzt werden. Bitte beachten Sie, dass dieser Artikel stark umgeschrieben und poliert wurde, um die Anforderungen der Pseudoorientierung zu erfüllen, während alle Informationen und Bilder des Originaltextes beibehalten werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Objektfit und Objektposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!