object-fit & object-position

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.

Steckbrief object-fit

Syntax: object-fit: fill | contain | cover | none | scale-down
Initialwert: fill
Vererbt: Nein
Animierbar: Nein

Kategorie: Responsive Design
Werte: 9
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

9 Werte

object-fit

Wert	Beschreibung	Beispiel
`fill`	Bild wird gestreckt, um den Container zu füllen. Seitenverhältnis wird verzerrt. (Standard)	object-fit: fill;
`contain`	Bild wird vollständig angezeigt, mit Leerräumen wenn nötig. Seitenverhältnis bleibt erhalten.	object-fit: contain;
`cover`	Bild füllt den Container komplett aus und wird bei Bedarf beschnitten. Seitenverhältnis bleibt erhalten.	object-fit: cover;
`none`	Bild wird in Originalgröße angezeigt, ohne Skalierung. Kann überlappen oder beschnitten werden.	object-fit: none;
`scale-down`	Wie contain, aber skaliert nie hoch. Wählt den kleineren Wert von none und contain.	object-fit: scale-down;

object-position

Wert	Beschreibung	Beispiel
`center`	Zentriert den Ausschnitt horizontal und vertikal. (Standard: 50% 50%)	object-position: center;
`Schlüsselwörter`	Kombinationen aus top, right, bottom, left, center.	object-position: top right;
`Prozent`	Position in Prozent relativ zum Container.	object-position: 25% 75%;
`Pixel / Längen`	Exakte Position in Pixeln oder anderen Längeneinheiten.	object-position: 10px 20px;

Beispiele

5 Beispiele

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

object-fit im Vergleich

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="...">

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

Runde Avatare mit cover

.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="...">

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.

object-position: Ausschnitt verschieben

.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="...">

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

Responsive Image Grid mit einheitlicher 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>

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

Thumbnail-Vorschau

.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

5 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett

Voller Support
Gmail

Teilweise

Grundlegend unterstützt, nicht alle Werte
Outlook

Keine

Kein Support, Bilder werden gestreckt
Thunderbird

Komplett

Voller Support
Yahoo Mail

Teilweise

Grundlegend unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da