Bilder ohne Verzerren einpassen mit object-fit

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

• object-fit – MDN Web Docs
• object-position – MDN Web Docs