CSS Die Objektanpassungseigenschaft
Die CSS object-fit-Eigenschaft wird verwendet, um anzugeben, wie ein <img> oder <video> in der Größe angepasst werden soll, damit es in seinen Container passt.
Die CSS-Objektanpassungseigenschaft
Die CSS object-fit-Eigenschaft wird verwendet, um anzugeben, wie ein <img> oder <video> in der Größe angepasst werden soll, damit es in seinen Container passt.
Diese Eigenschaft weist den Inhalt an, den Container auf verschiedene Weise zu füllen; wie "das Seitenverhältnis beibehalten" oder "strecken und so viel Platz wie möglich einnehmen".
Betrachten Sie das folgende Bild aus Paris. Dieses Bild ist 400 Pixel breit und 300 Pixel hoch:
Wenn wir das obige Bild jedoch so formatieren, dass es halb so breit (200 Pixel) und gleich hoch (300 Pixel) ist, sieht es so aus:
Beispiel
img {
width: 200px;
height:
300px;
}
Wir sehen, dass das Bild gestaucht wird, um in den Container mit 200 x 300 Pixel zu passen (das ursprüngliche Seitenverhältnis wird zerstört).
Hier kommt die object-fitEigenschaft ins Spiel. Die object-fitEigenschaft kann einen der folgenden Werte annehmen:
fill- Dies ist die Standardeinstellung. Das Bild wird so skaliert, dass es die angegebene Dimension ausfüllt. Bei Bedarf wird das Bild gestreckt oder gestaucht, um es einzupassencontain- Das Bild behält sein Seitenverhältnis bei, wird jedoch an die angegebene Größe angepasstcover- Das Bild behält sein Seitenverhältnis bei und füllt die angegebene Dimension aus. Das Bild wird passend zugeschnittennone- Das Bild wird nicht verkleinertscale-downnone- Das Bild wird auf die kleinste Version von oder herunterskaliertcontain
Verwenden von Objektanpassung: Abdeckung;
Wenn wir verwenden object-fit: cover;, behält das Bild sein Seitenverhältnis und füllt die angegebene Dimension aus. Das Bild wird passend zugeschnitten:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Verwenden von Objektanpassung: enthalten;
Wenn wir object-fit: contain;das Bild verwenden, behält es sein Seitenverhältnis bei, wird jedoch so angepasst, dass es in die angegebene Dimension passt:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Objektanpassung verwenden: fill;
Wenn wir object-fit: fill;das Bild verwenden, wird die Größe geändert, um die angegebene Dimension auszufüllen. Bei Bedarf wird das Bild gestreckt oder gestaucht, um es einzupassen:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Objektanpassung verwenden: keine;
Wenn wir object-fit: none;das Bild verwenden, wird die Größe nicht geändert:
Beispiel
img {
width: 200px;
height:
300px;
object-fit: none;
}
Objektanpassung verwenden: Herunterskalieren;
Wenn wir das Bild verwenden, wird es auf die kleinste Version von oder object-fit: scale-down;verkleinert :none
contain
Beispiel
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Ein anderes Beispiel
Hier haben wir zwei Bilder und wir möchten, dass sie die Breite von 50 % des Browserfensters und 100 % der Höhe ausfüllen.
Im folgenden Beispiel verwenden wir NICHT object-fit. Wenn wir also die Größe des Browserfensters ändern, wird das Seitenverhältnis der Bilder zerstört:
Beispiel
Im nächsten Beispiel verwenden wir object-fit: cover;, wenn wir also die Größe des Browserfensters ändern, bleibt das Seitenverhältnis der Bilder erhalten:
Beispiel
CSS-Objektanpassung Weitere Beispiele
Das folgende Beispiel zeigt alle möglichen Werte der object-fitEigenschaft in einem Beispiel:
Beispiel
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS-Objekt-* Eigenschaften
Die folgende Tabelle listet die CSS-Objekt-*-Eigenschaften auf:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |