W3docs
de
Anmelden

CSS object-fit Eigenschaft

Mit der CSS-Eigenschaft object-fit legen Sie fest, wie ein Element in seinen Container passt. Eigenschaftswerte mit Beispielen.

Die CSS-Eigenschaft object-fit steuert, wie ein ersetztes Element — beispielsweise ein <img> oder <video> — in seine Content-Box skaliert wird. Sie ist das Gegenstück zu background-size für Bilder und Videos: Anstatt Medien zu strecken oder zu verzerren, legen Sie fest, ob der Inhalt die Box füllen, einpassen, beschneiden oder unverändert bleiben soll.

Diese Seite erklärt, was object-fit bewirkt, wann Sie die Eigenschaft einsetzen sollten, jeden ihrer Werte mit einem ausführbaren Beispiel sowie die verwandten Eigenschaften zur Feinabstimmung des Ergebnisses.

Warum object-fit verwenden

Wenn Sie eine feste width und height für ein Bild festlegen, dessen Seitenverhältnis von der Box abweicht, streckt der Browser das Bild standardmäßig — Gesichter werden gestaucht, Logos verzerrt. object-fit löst dieses Problem. Es ermöglicht Ihnen, die Box-Abmessungen beizubehalten (wichtig für vorhersehbare Layouts und Grids) und gleichzeitig dem Browser mitzuteilen, wie das natürliche Seitenverhältnis des Bildes mit der Box in Einklang gebracht werden soll:

  • Verwenden Sie cover für Hero-Bilder, Thumbnails und Avatare — die Box wird vollständig gefüllt, der Überlauf wird abgeschnitten, ohne Verzerrung. Dies ist der am häufigsten verwendete Wert.
  • Verwenden Sie contain, wenn das gesamte Bild sichtbar bleiben muss (Logos, Produktfotos), auch wenn dadurch leerer Raum entsteht.
  • Verwenden Sie fill (den Standardwert) nur, wenn Sie das Bild tatsächlich auf die genaue Box-Größe dehnen möchten.

Standardmäßig wird das Bild innerhalb der Box zentriert. Um zu steuern, welcher Teil sichtbar bleibt, wenn mit cover beschnitten wird, kombinieren Sie object-fit mit object-position.

Anfangswertfill
Gilt fürErsetzte Elemente (<img>, <video>, <object> usw.).
VererbbarNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.objectFit = "cover";

Syntax

CSS object-fit Syntax

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

In jedem der folgenden Beispiele ist die Box 200px breit und 400px hoch — eine hohe, schmale Box — während das Quellbild im Querformat vorliegt. Diese Diskrepanz macht das Verhalten jedes Wertes sichtbar.

Beispiel der object-fit Eigenschaft mit dem Wert "fill"

fill (der Standardwert) ignoriert das Seitenverhältnis und streckt das Bild so, dass es genau zur Box passt, wodurch der Baum gestaucht wirkt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Fill value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>
Probier es selbst »

Ergebnis

CSS object-fit fill-Wert streckt ein Bild

Das Bild wird gestreckt, um in die Box zu passen, wodurch es verzerrt wird. Der nächste Wert, cover, behebt dies durch Beschneiden statt Strecken.

Beispiel der object-fit Eigenschaft mit dem Wert "cover"

cover skaliert das Bild so, dass es die gesamte Box füllt, wobei das Seitenverhältnis beibehalten wird, und schneidet anschließend alles ab, was überläuft. Nichts wird verzerrt, aber die Ränder können abgeschnitten sein. Dies ist die ideale Wahl für Thumbnails und Hero-Banner.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Cover value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>
Probier es selbst »

Beispiel der object-fit Eigenschaft mit dem Wert "contain"

contain skaliert das Bild so, dass es innerhalb der Box passt, wobei das Seitenverhältnis beibehalten wird, sodass das gesamte Bild sichtbar bleibt. Da die Box höher ist als das Bild breit ist, entstehen leere Streifen ober- und unterhalb (oft als Letterboxing bezeichnet).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Contain value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>
Probier es selbst »

Beispiel der object-fit Eigenschaft mit dem Wert "none"

none behält das Bild in seiner intrinsischen (natürlichen) Größe und ignoriert die Box-Abmessungen vollständig. Das Bild wird zentriert, und jeder Teil, der die Box überschreitet, wird abgeschnitten. Verwenden Sie diesen Wert, wenn die ursprüngliche Pixelgröße erhalten bleiben muss.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: none;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>None value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Beispiel der object-fit Eigenschaft mit dem Wert "scale-down"

scale-down vergleicht none und contain und verwendet denjenigen, der das kleinere gerenderte Bild ergibt. In der Praxis verhält es sich wie contain für Bilder, die größer als die Box sind, und wie none für Bilder, die kleiner sind — eine sichere Methode, um übergroße Medien zu verkleinern, ohne kleine Bilder jemals hochzuskalieren.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Scale-down value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
fillStandard. Streckt den Inhalt so, dass er die Content-Box genau ausfüllt, ohne Rücksicht auf das Seitenverhältnis (das Bild kann verzerrt werden).
containSkaliert den Inhalt so, dass er in die Box passt, wobei das Seitenverhältnis erhalten bleibt; leerer Raum kann entstehen (Letterboxing).
coverSkaliert den Inhalt so, dass er die Box füllt, wobei das Seitenverhältnis erhalten bleibt; überlaufende Ränder werden abgeschnitten.
noneBehält den Inhalt in seiner intrinsischen Größe, ohne Rücksicht auf die Box; zentriert und beschnitten, wenn er überläuft.
scale-downRendert den Inhalt als das Kleinere aus none und contain — skaliert das Bild niemals hoch.
initialSetzt die Eigenschaft auf ihren Standardwert (fill).
inheritErbt die Eigenschaft vom übergeordneten Element.

Browser-Unterstützung und Tipps

object-fit wird von allen modernen Browsern unterstützt. Beachten Sie diese Punkte:

  • Es wirkt nur auf ersetzte Elemente (<img>, <video>, <object>, eingebettete SVG). Auf einem <div> hat es keine Wirkung — verwenden Sie dort stattdessen background-size.
  • Das Element nimmt weiterhin die von Ihnen festgelegten width/height-Werte ein; object-fit ändert nur, wie der Inhalt innerhalb dieser Box gezeichnet wird.
  • Kombinieren Sie es mit object-position, um festzulegen, welcher Teil des Bildes sichtbar bleibt, wenn Sie cover oder none verwenden.
  • Wenn der abgeschnittene Überlauf verborgen bleiben soll, schneidet die Box ihn bereits ab; mehr dazu erfahren Sie unter CSS overflow.

Übungen

Übung
Welche möglichen Werte hat die Eigenschaft 'object-fit' in CSS?
Welche möglichen Werte hat die Eigenschaft 'object-fit' in CSS?
Was this page helpful?