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
grid-template-areas – ein Layout, das man im Code sehen kann
Statt Zeilen- und Spaltennummern zu zählen, malst du dein Layout als kleine ASCII-Zeichnung ins CSS. Auf dem Handy schreibst du die Zeichnung einfach anders – dieselben Bausteine, andere Anordnung, kein einziger geänderter HTML-Knoten.
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.