Bildausschnitt mit CSS

In manchen Fällen möchte man ein Bild in voller Breite, aber nicht mit der kompletten Höhe ausgeben. Wird ein Bild mit einer Breite von 100% und einer fixe Höhe von z.B. 300px definiert, wird das Bild gestaucht. Will man einfach nur einen Bildausschnitt darstellen, ohne dass das Bild gestaucht wird, kann man die CSS-Eigenschaften object-* verwenden.

Hier muss man nicht mit der Eigenschaft clip arbeiten und den Bildausschnitt genau definieren. Mit object-fit: cover wird das Bild in der definierten Breite und Höhe mit dem originalen Bildverhältnis dargestellt. Mit object-position: top center, wird ein vertikal mittiger Bildauschnitt gewählt. Ich habe als Beispiel die Klasse crop-center für den HTML-Tag img definiert. Dadurch wird der mittlere Bildausschnitt des Bildes, das die Klasse crop-center übergeben bekommt, ausgeben.

img.crop-center{
    height: 300px;
    width: 100% !important;
    object-fit: cover;
    object-position: top center;
}