object-fit & object-position

Zuletzt aktualisiert am 15. Februar 2026

object-fit bestimmt, wie ein Bild oder Video in seinen Container eingepasst wird: ob es gestreckt, beschnitten oder vollständig angezeigt wird. Zusammen mit object-position kontrollierst du, welcher Ausschnitt sichtbar ist. Denk an background-size und background-position, nur für <img> und <video> Elemente.

Grundlagen

object-fit wirkt ausschließlich auf Replaced Elements, das sind <img>, <video>, <canvas> und <object>. Auf <div> oder andere Elemente hat es keinen Effekt. Die Property steuert, wie das Medium in die Box des Elements passt, wenn das Seitenverhältnis von Bild und Container unterschiedlich ist.

cover ist der häufigste Wert: Das Bild füllt den gesamten Container aus und wird bei Bedarf beschnitten, wobei das Seitenverhältnis erhalten bleibt. contain zeigt das gesamte Bild, aber es können Leerräume entstehen. fill (Standard) streckt das Bild, um den Container vollständig zu füllen, das Seitenverhältnis wird dabei verzerrt.

object-position funktioniert wie background-position: damit verschiebst du den sichtbaren Ausschnitt. Besonders nützlich bei cover, um z.B. Gesichter im Bild sichtbar zu halten statt sie abzuschneiden.

Syntax & Werte

object-fit

object-position

Beispiele

object-fit im Vergleich

Alle fünf Modi nebeneinander. Das Quellbild hat ein anderes Seitenverhältnis als der Container, damit die Unterschiede sichtbar werden.

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

.fill       { object-fit: fill; }       /* Streckt */
.contain    { object-fit: contain; }    /* Zeigt komplett */
.cover      { object-fit: cover; }      /* Füllt aus */
.none       { object-fit: none; }       /* Originalgröße */
.scale-down { object-fit: scale-down; } /* Nie hochskaliert */

<!-- Bild: 400×250 in Container: 200×150 -->
<img src="foto.jpg" class="fill" alt="...">
<img src="foto.jpg" class="contain" alt="...">
<img src="foto.jpg" class="cover" alt="...">
<img src="foto.jpg" class="none" alt="...">
<img src="foto.jpg" class="scale-down" alt="...">

Avatar mit cover

Profilbilder müssen quadratisch und rund sein, egal welches Seitenverhältnis das Original hat. object-fit: cover sorgt dafür.

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* Verschiedene Größen */
.avatar-sm { width: 40px;  height: 40px; }
.avatar-md { width: 64px;  height: 64px; }
.avatar-lg { width: 96px;  height: 96px; }

<img class="avatar avatar-sm" src="portrait.jpg" alt="...">
<img class="avatar avatar-md" src="portrait.jpg" alt="...">
<img class="avatar avatar-lg" src="portrait.jpg" alt="...">

object-position für Ausschnitt

Mit object-position bestimmst du, welcher Teil des Bildes bei cover sichtbar bleibt. Besonders wichtig für Porträts: Gesichter sind oben, nicht in der Mitte.

.hero-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Gesicht oben im Bild? */
.hero-image { object-position: top; }

/* Standard: zentriert */
.hero-image { object-position: center; }

/* Wichtiges unten im Bild? */
.hero-image { object-position: bottom; }

/* Exakt positionieren */
.hero-image { object-position: 30% 20%; }

<!-- Hohes Bild (300×600) in flachen Container (120×80) -->
<img class="top" src="portrait.jpg" alt="...">
<img class="center" src="portrait.jpg" alt="...">
<img class="bottom" src="portrait.jpg" alt="...">

Responsive Image Grid

Bilder mit unterschiedlichen Seitenverhältnissen in einem gleichmäßigen Grid: object-fit: cover sorgt für einheitliche Höhe.

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.image-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
}

<!-- Bilder mit verschiedenen Seitenverhältnissen -->
<div class="image-grid">
<img src="landscape.jpg" alt="...">  <!-- 400×260 -->
<img src="square.jpg" alt="...">     <!-- 200×200 -->
<img src="wide.jpg" alt="...">       <!-- 500×280 -->
<img src="portrait.jpg" alt="...">   <!-- 250×400 -->
<img src="panorama.jpg" alt="...">   <!-- 600×240 -->
<img src="photo.jpg" alt="...">      <!-- 350×260 -->
</div>

Thumbnail mit Hover-Vergrößerung

Thumbnails mit cover und beim Hover zeigt contain das vollständige Bild.

.thumbnail {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.thumbnail:hover {
  transform: scale(1.05);
}

<img class="thumbnail" src="landscape.jpg" alt="...">
<img class="thumbnail" src="portrait.jpg" alt="...">
<img class="thumbnail" src="wide.jpg" alt="...">

Barrierefreiheit

Wenn object-fit: cover wichtige Bildinhalte abschneidet, ist der alt-Text besonders wichtig. Beschreibe das vollständige Bild, nicht nur den sichtbaren Ausschnitt. Nutze object-position, um das Wichtigste im sichtbaren Bereich zu halten, bei Porträts z.B. object-position: top für Gesichter.

Für rein dekorative Bilder setze alt="", damit Screenreader sie überspringen. Bei informativen Bildern mit cover stelle sicher, dass keine kritische Information durch den Beschnitt verloren geht.

Häufige Fehler

• object-fit auf ein <div> statt auf ein <img> oder <video> anwenden. Die Property wirkt nur auf Replaced Elements. Für <div>-Hintergründe nutze background-size.
• Keine expliziten Dimensionen setzen. object-fit braucht eine definierte Breite und Höhe, um etwas zu tun. Ohne feste Dimensionen gibt es keinen Container, in den eingepasst werden soll.
• cover verwenden, ohne zu prüfen, was abgeschnitten wird. Besonders bei Produkt-Fotos oder Porträts kann das Wichtigste im Bild unsichtbar werden. Teste verschiedene Seitenverhältnisse und nutze object-position.
• Nicht wissen, dass fill der Standard ist. Wenn ein Bild verzerrt aussieht, wurde wahrscheinlich eine feste Höhe und Breite gesetzt, ohne object-fit zu ändern.
• background-size: cover mit object-fit: cover verwechseln. Ersteres ist für CSS-Hintergrundbilder, letzteres für HTML-Bilder (<img>-Tags).

Browser-Kompatibilität

object-fit und object-position werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

object-fit wird in E-Mail-Clients nur eingeschränkt unterstützt. Outlook ignoriert die Property komplett.

Verwandte Eigenschaften