CSS object-fit-Eigenschaft

CSS object-fit Die Eigenschaft wird verwendet, um zu bestimmen, wie die Größe von <img> oder <video> angepasst werden soll, um in den Behälter zu passen.

Browserunterstützung

Die Zahlen in der Tabelle zeigen die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Eigenschaft Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit-Eigenschaft

CSS object-fit Die Eigenschaft wird verwendet, um zu bestimmen, wie die Größe von <img> oder <video> angepasst werden soll, um in den Behälter zu passen.

Diese Eigenschaft gibt an, wie der Inhalt auf unterschiedliche Weise in den Behälter gefüllt wird. Zum Beispiel "Beibehalten des Breiten- und Höhenverhältnisses" oder "Ausdehnen und so viel wie möglich des Raums beanspruchen".

Sehen Sie sich das Bild der Tulpen aus dem Shanghai Flower Port an, das 300x300 Pixel groß ist:

Tulip

Aber wenn wir das obige Bild auf 200x300 Pixel setzen, dann sieht es so aus:

Tulip

Beispiel

img {
  width: 200px;
  height: 300px;
}

Probieren Sie es selbst aus

Wir sehen, dass das Bild komprimiert wird, um in den 200x300-Pixel-Container zu passen, und das ursprüngliche Breitenverhältnis wird zerstört.

Wenn wir object-fit: cover;Es schneidet die Seiten des Bildes ab, behält das Breiten- und Höhenverhältnis bei und füllt den Raum wie folgt aus:

Kaffee

Beispiel

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Probieren Sie es selbst aus

Ein weiteres Beispiel

Hier haben wir zwei Bilder, und wir möchten, dass sie 50% der Breite und 100% der Höhe des Browserfensters füllen.

In dem folgenden Beispiel verwenden wir nicht object-fitDaher wird das Verhältnis von Breite und Höhe des Bildes zerstört, wenn wir die Größe des Browserfensters anpassen:

Beispiel

Probieren Sie es selbst aus

In dem nächsten Beispiel verwenden wir object-fit: cover;Daher wird das Verhältnis von Breite und Höhe des Bildes beibehalten, wenn wir die Größe des Browserfensters anpassen:

Beispiel

Probieren Sie es selbst aus

Alle Werte der CSS object-fit-Eigenschaft

object-fit Das Attribut akzeptiert die folgenden Werte:

  • fill - Standardwert. Passen Sie die Größe des ersetzenen Inhalts an, um den Inhaltshafts des Elements zu füllen. Wenn nötig, strecken oder komprimieren Sie das Objekt, um es an das Objekt anzupassen.
  • contain - Skalieren Sie den ersetzenen Inhalt, um das Breiten- und Höhenverhältnis zu behalten, und setzen Sie ihn in den Inhaltshafts des Elements.
  • cover - Passen Sie die Größe des ersetzenen Inhalts an, um den Breiten- und Höhenverhältnissen des gesamten Inhaltshafts zu entsprechen, während Sie den Inhaltselementrahmen füllen. Das Objekt wird beschnitten, um zu passen.
  • none - Die Größe des ersetzten Inhalts nicht anpassen.
  • scale-down - Die Größe des Inhalts anpassen, als wäre kein Inhalt oder ein Inhalt enthalten, was zu einer kleineren spezifischen Objektgröße führt

Die folgenden Beispiele zeigen: object-fit Alle möglichen Werte der Eigenschaft:

Beispiel

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Probieren Sie es selbst aus