Wie verwende ich CSS-Objektfit und Objektposition, um zu steuern, wie Bilder angezeigt werden?

Wie verwende ich CSS-Objektfit und Objektposition, um zu steuern, wie Bilder angezeigt werden?

CSS liefert die Eigenschaften für object-fit und object-position um zu steuern, wie Bilder oder andere ersetzte Elemente (wie Videos) in ihren enthaltenen Feldern angezeigt werden. Diese Eigenschaften sind besonders nützlich, wenn die Abmessungen des Bildes nicht mit den Dimensionen seines Behälters übereinstimmen.

• Objektfit : Diese Eigenschaft gibt an, wie der Inhalt eines ersetztem Elements zu seinem Container die Größe geändert werden sollte. Es steuert das Seitenverhältnis und die Skalierung des Inhalts.
• Objektposition : Diese Eigenschaft bestimmt die Ausrichtung des Inhalts des ersetztem Elements im Container, nachdem sie gemäß der object-fit -Eigenschaft geändert wurde.

Um diese Eigenschaften zu verwenden, wenden Sie sie einfach auf Ihre CSS -Regel an, die auf das Bildelement abzielt. Hier ist ein Beispiel:

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

In diesem Beispiel wird das Bild so geändert, dass sie in eine 300 x 24 Pixel-Box angepasst werden, während sein Seitenverhältnis ( object-fit: cover ) beibehalten wird. Der Bildinhalt wird in dieser Box zentriert ( object-position: center ).

Was sind die unterschiedlichen Werte für Objektfit und wie wirken sie sich auf die Bildanzeige aus?

Die object-fit -Eigenschaft kann mehrere Werte annehmen, wobei jeweils das Bild in seinem Container angezeigt wird:

• FILL : Dies ist der Standardwert. Das Bild wird gestreckt, um die Inhaltsbox zu füllen, die das Seitenverhältnis verzerren kann.
• Enthält : Das Bild ist skaliert, um sein Seitenverhältnis beizubehalten und gleichzeitig in die Inhaltsbox anzupassen. Dies bedeutet, dass das Bild möglicherweise nicht die gesamte Box füllt, wenn sich sein Seitenverhältnis von dem des Behälters unterscheidet.
• Abdeckung : Das Bild ist skaliert, um sein Seitenverhältnis beizubehalten und gleichzeitig die gesamte Inhaltsbox zu füllen. Dies kann dazu führen, dass das Bild zugeschnitten ist, wenn die Seitenverhältnisse nicht übereinstimmen.
• Keine : Das Bild wird überhaupt nicht geändert und wird in seiner intrinsischen Größe angezeigt. Wenn das Bild größer als der Behälter ist, überflutet es.
• SKAHRENDER : Das Bild ist so groß wie none oder contain oder enthaltener Bild, je nachdem, was zu einer kleineren Betonobjektgröße führen würde.

Jeder dieser Werte bietet eine andere Möglichkeit, die Darstellung von Bildern abhängig von Ihren Entwurfsanforderungen zu verwalten.

Kann Objektposition verwendet werden, um Bilder in ihren Behältern auszurichten, und wenn ja, wie?

Ja, object-position kann verwendet werden, um Bilder in ihren Containern auszurichten, nachdem sie mit object-fit geändert wurden. Die object-position nimmt ein oder zwei Werte an, die die X- und Y-Koordinaten für die Positionierung des Bildes angeben.

Die Syntax für object-position ähnelt der background-position . Hier sind einige Beispiele dafür, wie Sie es verwenden könnten:

• Um ein Bild zu zentrieren:

   <code class="css">img { object-position: center; }</code>

  Nach dem Login kopieren

• Um das Bild oben rechts zu positionieren:

   <code class="css">img { object-position: right top; }</code>

  Nach dem Login kopieren

• Um das Bild mit präzisen Koordinaten zu positionieren:

   <code class="css">img { object-position: 20% 50%; }</code>

  Nach dem Login kopieren

Auf diese Weise können Sie die genaue Platzierung des Bildes in seinem Container fein steuern, insbesondere bei Verwendung object-fit: cover oder contain , um die Bildgröße zu verwalten.

Wie kann ich sicherstellen, dass Bilder ihr Seitenverhältnis mithilfe von Objektanpassungen beibehalten?

Um sicherzustellen, dass die Bilder ihr Seitenverhältnis beibehalten, sollten Sie die object-fit Eigenschaft entweder contain , none und scale-down Werte cover . So hilft jeder dazu, das Seitenverhältnis aufrechtzuerhalten:

• Enthält : Dies skaliert das Bild auf die größte Größe, so dass sowohl seine Breite als auch die Höhe in die Inhaltsbox passen. Das Seitenverhältnis des Bildes bleibt erhalten und kann nicht die gesamte Box füllen.
• Abdeckung : Dies skaliert das Bild auf die kleinste Größe, so dass sowohl seine Breite als auch die Höhe die Inhaltsbox vollständig abdecken können. Das Seitenverhältnis des Bildes bleibt erhalten, aber Teile des Bildes können zugeschnitten werden.
• Keine : Das Bild wird in seiner intrinsischen Größe angezeigt. Es wird nicht geändert, wodurch sein ursprüngliches Seitenverhältnis beibehält.
• SKAUER : Dies wirkt wie none oder contain , was zu einer kleineren oder gleicher Größe führen würde. Es stellt sicher, dass das Seitenverhältnis beibehalten wird und möglicherweise auch die Größe des Bildes in den Behälter reduziert.

Durch die Verwendung eines dieser Werte außer fill wird sichergestellt, dass das Bild sein Seitenverhältnis beibehält, während der Container angepasst oder gefüllt wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS-Objektfit und Objektposition, um zu steuern, wie Bilder angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!