CSS object-fit Eigenschaft

Definition und Verwendung

Die objectFit-Eigenschaft wird verwendet, um zu bestimmen, wie die Größe von <img> oder <video> angepasst wird, um ihren Container zu passen.

Diese Eigenschaft teilt mit, wie der Inhalt im Container gefüllt wird. Zum Beispiel 'Beibehalten des Verhältnisses der Breite und Höhe' oder 'Ausdehnen und so viel wie möglich des Raums belegen'.

Weitere Informationen:

CSS Tutorial:CSS object-fit

CSS Referenzhandbuch:CSS object-position

HTML DOM Referenzhandbuch:objectFit-Eigenschaft

Beispiel

Beschneiden Sie die Seiten des Bildes, behalten Sie das Verhältnis der Breite und Höhe bei und füllen Sie den Raum aus:

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

Probieren Sie es selbst aus

CSS-Syntax

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Eigenschaftswert

Wert Beschreibung
fill Standardwert. Die Größe des ersetzen Inhalts wird angepasst, um den Inhaltsumfang des Elements zu füllen. Wenn nötig, wird das Objekt gestreckt oder komprimiert.
contain Der ersetzte Inhalt wird skaliert, um das Verhältnis der Breite und Höhe beizubehalten, während er in den Inhaltsumfang des Elements passt.
cover Die Größe des ersetzen Inhalts wird angepasst, um den gesamten Inhaltsumfang des Füllelements zu füllen, wobei das Verhältnis der Breite und Höhe beibehalten wird. Das Objekt wird beschnitten.
none Der ersetzte Inhalt wird nicht skaliert.
scale-down Die Größe des Inhalts ist mit 'none' oder 'contain' identisch, abhängig davon, welche der beiden die kleinere Objektgröße erhält.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: Siehe separate Eigenschaften.
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.objectFit="cover"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0