Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
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;
}
