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.
1. 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;
}
Das obere CSS Beispiel schneidet den unteren bereiches des Bildes ab und stellt nur die oberen 300px da.
2. Eine weitere Möglichkeit wäre clip-path zu verwenden. z.B. um ein Bereich eines Bildes rechteckig zu beschneiden. Es gibt hier auch die Möglichkeit einen Kreis- oder Herz-Ausschnitt und viele weitere zu verwenden. CSS-Beispiel für einen rechteckigen Ausschnitt:
img.clip-rechteck {
clip-path: rect(120px 400px 280px 80px);
}
Dieses Beispiel schneidet das Bild so zu das nur der Inhalt auf dem Zettel in Form eines Rechteckts zu sehen ist.
