Bilder ohne Verzerren einpassen mit object-fit
Wenn ein Bild in einen festen Rahmen soll, wird es schnell gestaucht oder verzerrt. object-fit löst das: Das Bild füllt den Rahmen oder passt komplett hinein – ohne die Proportionen zu ruinieren. Mit object-position steuerst du den Ausschnitt.
Ein häufiges Problem: Du hast ein Raster mit festen Kacheln, aber die Bilder haben unterschiedliche Formate. Gibst du width und height fest vor, werden sie verzerrt. Die saubere Lösung heißt object-fit – sie sagt dem Bild, wie es sich in seinen Rahmen einfügt.
cover – füllt den Rahmen, schneidet über
.thumb {
width: 100%;
height: 200px;
object-fit: cover; /* füllt komplett, beschneidet Überstand */
}cover skaliert das Bild so, dass es den Rahmen ganz ausfüllt – Überstehendes wird abgeschnitten, aber nie verzerrt. Das ist der Standard für Vorschaubilder und Karten.
contain – ganz sichtbar, mit Rand
.logo {
width: 100%;
height: 120px;
object-fit: contain; /* komplett sichtbar, evtl. leerer Rand */
}contain zeigt das ganze Bild und lässt lieber Platz frei, statt zu beschneiden – ideal für Logos oder Produktfotos, bei denen nichts fehlen darf.
Den Ausschnitt steuern mit object-position
Bei cover entscheidet der Browser, welcher Teil sichtbar bleibt – standardmäßig die Mitte. Willst du z. B. bei Porträts den oberen Bereich (Gesicht) behalten:
.thumb {
object-fit: cover;
object-position: top; /* oder "50% 20%", "left center" … */
}Merksatz
cover: Rahmen voll, Bild wird beschnitten → Karten, Hero-Bilder.contain: Bild voll sichtbar, evtl. Leerraum → Logos, Produktbilder.- Beide erhalten die Proportionen – kein Stauchen mehr.
object-fit funktioniert genauso für <video>. Wenn du eine Website mit sauberem Bild-Layout brauchst, baue ich dir das – meld dich über bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.