CSS Object-Fit
Float ließ Text neben Medien umfließen. object-fit beantwortet eine andere Medienfrage: Wenn ein img oder video in einem Rahmen mit fester Größe sitzt — wie soll der Inhalt diesen Rahmen füllen? Meistere cover und contain, bevor du Gesichter mit fill verzerrst.
Ein object-fit-Werkzeugkasten
📊 Object-fit auf einen Blick
| Wert | Alltagsaufgabe |
|---|---|
fill |
Auf den Rahmen strecken — Seitenverhältnis kann verzerren |
contain |
Gesamtes Medium hineinpassen; leere Streifen möglich |
cover |
Rahmen füllen; Kanten können beschnitten werden |
none |
Intrinsische Größe behalten; Überlauf oder Lücken möglich |
scale-down |
Wie none oder contain — je nachdem, was kleiner ist |
object-position |
Zielt, welcher Teil beim Zuschneiden/Einpassen sichtbar bleibt |
object-fit glänzt nur, wenn das ersetzte Element eine klare Breite und Höhe hat (oder beide Achsen begrenzt sind). Ein frei fließendes Bild mit auto-Höhe hat keinen Rahmen zum „Hineinpassen“.
Cover — Rahmen füllen, Zuschnitt erlaubt
Karten und Hero-Thumbs wollen oft jeden Pixel des Kastens gefüllt. cover skaliert hoch und schneidet Überlauf ab. Paare einen quadratischen Kasten mit cover für saubere Grids.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — das ganze Bild zeigen
Produktfotos und Diagramme müssen oft vollständig sichtbar bleiben. contain letterboxt, wenn Seitenverhältnisse abweichen — besser ein Streifen als ein abgeschnittenes Logo.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill streckt — mit Vorsicht nutzen
fill zwingt das Medium auf die Kastengröße, auch wenn Proportionen verzerren. Gut für abstrakte Texturen; riskant für Gesichter, Logos und Diagramme.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position zielt den Zuschnitt
Wenn cover beschneidet, kann die Standardmitte ein Gesicht oder Logo verstecken. Justiere mit object-position — Prozentwerte oder Schlüsselwörter wie top und left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Eine ruhige object-fit-Gewohnheit
Nutze echte <img> / <video> mit object-fit für bedeutungsvolle Medien. Nutze background-size, wenn das Bild dekoratives CSS-Chrome ist. Zuerst den Kasten bemessen, dann cover oder contain wählen, danach die Position feinjustieren.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Selbst ausprobieren
- Gib einem Bild feste Breite und Höhe, dann teste
covervs.contain. - Baue einen runden Avatar mit
coverund verschiebeobject-position. - Wende
filleinmal an und beachte die Verzerrung — dann zurückschalten. - Vergleiche denselben Zuschnitt als CSS-
background-size: cover-Dekoration. - Schreibe einen Satz: Wann ist contain sicherer als cover?
Häufige Fehler
object-fitohne bemessenen Kasten erwartenfillbei Porträts und Logos- Diese Lektion mit Float-Umfluss oder Position-Offsets verwechseln
- Bedeutungsvolle Fotos nur in
background-imagelegen (Alt-Text schwieriger) object-positionvergessen, wenn cover das Motiv versteckt
Kurzfassung
object-fitpasst ersetzte Medien in einen bemessenen Rahmencoverfüllt und kann beschneiden;containzeigt alles und kann letterboxenfillkann verzerren — sparsam einsetzenobject-positionzielt den sichtbaren Bereich- object-fit für Inhaltsmedien; background-size für Dekoration
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt