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.
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
).
Die object-fit
-Eigenschaft kann mehrere Werte annehmen, wobei jeweils das Bild in seinem Container angezeigt wird:
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.
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>
Um das Bild oben rechts zu positionieren:
<code class="css">img { object-position: right top; }</code>
Um das Bild mit präzisen Koordinaten zu positionieren:
<code class="css">img { object-position: 20% 50%; }</code>
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.
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:
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!