Bildausschnitt mit CSS

Bildausschnitt mit CSS

Die richtige Analyse und Strategie

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-Eigenschaftenobject-* 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 Bildauschnitt 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;
}

Shopware 5: Eigenen Tab in der Artikeldetail Ansicht
Strategie für erfolgreiches SEO