Responsive Onlineshop Design: Immer einheitlich große Produktbilder

Wer ein schönes Design für einen Onlineshop umsetzen möchte kennt vielleicht das Problem: Du möchtest in deinem Shop-Theme eine schöne Grid-Ansicht der Produktbilder implementieren, kannst aber nicht gewährleisten, dass du oder der Kunde immer gleich große Produktbilder in das Shopsystem hoch lädt. Unterschiedlich große Produktbilder sorgen dann dafür, dass sich das Grid verschiebt oder die Produktbilder uneinheitlich aussehen und wenn du den Bildern eine feste größe gibst, verlieren sie ihr Responsive Design.

Erstellt in E-Commerce, Stylesheets, Webentwicklung am

Wer ein schönes Design für einen Onlineshop umsetzen möchte kennt vielleicht das Problem: Du möchtest in deinem Shop-Theme eine schöne Grid-Ansicht der Produktbilder implementieren, kannst aber nicht gewährleisten, dass du oder der Kunde immer gleich große Produktbilder in das Shopsystem hochlädt. Unterschiedlich große Produktbilder sorgen dann dafür, dass sich das Grid verschiebt oder die Produktbilder uneinheitlich aussehen und wenn du den Bildern eine feste größe gibst, verlieren sie ihr Responsive Design.

Schön wäre es, wenn man dafür beliebige Seitenverhältnisse wie 1:1, 2:1, 1:2, 4:3 oder 16:9 erzwingen könnte, aber genau das ist tatsächlich mit relativ wenig Aufwand möglich.

Seitenverhältnis 16:9 Unterbereiche von Chou Chou Berlin, alle Bilder haben das Seitenverhältnis 16:9.

Seitenverhältnis 3:4 Kontaktformular von Chou Chou Berlin, beide Bilder haben das Seitenverhältnis 3:4.

Original-Lösung

Der Webentwickler Marc Hinse hat dazu in seinem Blog eine sehr schöne Lösung vorgestellt. In seiner Lösung hat er einen Weg gefunden, wie dies mit reinem CSS und dem img-Tag erreicht werden kann.

Wer bei seinem Shop-Theme unbedingt das img-Tag verwenden will oder muss, der sollte direkt zu seiner Version greifen, das img-tag kann vorteilhaft bei der Suchmaschinenoptimierung sein. Lies für für weitere Informationen am besten direkt seinen Artikel dazu durch.

Angepasste Lösung

Ich möchte in diesem Artikel auf eine von mir angepasste Version seiner Lösung eingehen:

SASS Version

/*
 * ASPECT RATIO for background images
 * 
 * @authors Marc Hinse, Pascal Garber
 * @see: http://www.jumplink.eu/blog/post/onlineshop-immer-einheitlich-grosse-produktbilder
 * @see: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
 */
.background-box {
  background-size: cover;
  background-position: center center;

  width: 100%;
  padding-top: 100%; // Default 1-1 aspect ratio

  &.ratio-1-1 {
    padding-top: 100%;
  }
  &.ratio-2-1 {
    padding-top: 50%;
  }
  &.ratio-1-2 {
    padding-top: 200%;
  }
  &.ratio-4-3 {
    padding-top: 75%;
  }
  &.ratio-16-9 {
    padding-top: 56.25%;
  }
  &.ratio-3-4 {
    padding-top: 125%;
  }
}

CSS Version

/*
 * ASPECT RATIO for background images
 * 
 * @authors Marc Hinse, Pascal Garber
 * @see: http://www.jumplink.eu/blog/post/onlineshop-immer-einheitlich-grosse-produktbilder
 * @see: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
 */
.background-box {
  background-size: cover;
  background-position: center center;

  width: 100%;
  padding-top: 100%; /* Default 1-1 aspect ratio */
}
.background-box.ratio-1-1 {
  padding-top: 100%;
}
.background-box.ratio-2-1 {
  padding-top: 50%;
}
.background-box.ratio-1-2 {
  padding-top: 200%;
}
.background-box.ratio-4-3 {
  padding-top: 75%;
}
.background-box.ratio-16-9 {
  padding-top: 56.25%;
}
.background-box.ratio-3-4 {
  padding-top: 125%;
}

HTML

In deinem HTML-Code können diese CSS-Klassen dann wie folgt eingesetzt werden:

<div class="background-box ratio-1-2" style="background-image: url(produktbild.jpg);" title="Produkt Bild"></div>

Unsere Hauptklasse background-box musst du immer verwendet sobald ein bestimmtes Seitenverhältnis verwendet werden soll, wird keine weitere Klasse angegeben wird das Seitenverhältnis 1:1 verwendet. Die zweite Klasse ratio-1-2 bestimmt dann das gewünschte Seitenverhältnis, in diesem Fall 1:2.

Damit auch das richtige Produktbild verwendet wird, musst du dieses anschließend noch über style="background-image: url(produktbild.jpg);" angegeben.

Shopify

In dem Shopsystem Shopify könnte dies wie folgt aussehen:

<a href="{{ product.url | within: collection }}">
  <div class="background-box ratio-1-15" style="background-image: url({{ product | img_url: 'grande' }});" title="{{ product.featured_image.alt | escape }}"></div>
</a>

Anschnitt beeinflussen

Der Vorteil dieser Version ist, dass der CSS-Code geringer ist und du das Verhalten wie Ränder vom Produktbild abgeschnitten werden durch background-position beeinflussen kannst.

Möchtest du beispielsweise, dass bei zu großen Produktbildern nur der untere Rand abgeschnitten wird, dann musst du als Hintergrundposition background-position: center bottom; verwenden. Möchtest du, dass Produktbilder links oder unten abgeschnitten werden, musst du background-position: left bottom; verwenden.

Weitere Seitenverhältnisse hinzufügen

Ist dein gewünschtes Seitenverhältnis nicht dabei, kannst du dir dein eigenes berechnen und als CSS-Klasse hinzufügen. Hat dein Produktbild beispielsweise die Maße 1600x1200 Pixel, dann kann das Seitenverhältnis durch Breite/Höhe berechnet werden: 1600 / 1200 = 1,33, wir haben also ein Seitenverhältnis von 1:1,33 (oder umgerechnet 8:6), das ergibt ein padding-top von 133% (1,33 * 100 = 133%), unsere zusätzliche CSS-Klasse sieht dann so aus:

.ratio-8-6 {
  padding-top: 133%;
}

Weitere Einsatzzwecke

Natürlich lassen sich diese Klassen auch wunderbar für viele weitere Einssatzzwecke verwenden, bei denen gleichgroße Bilder gewünscht sind, z.B. in Slideshows.

Slideshow mit Seitenverhältnis 16:9 Slideshow für Anita Hass im Seitenverhältnis 16:9

Newsletter

Melde dich für unseren Newsletter an

Impressum

JumpLink network logo

Angaben gem. § 5 TMG

Betreiber und Kontakt
Pascal Garber
Kasernenstraße 8
27472 Cuxhaven DE

Telefon
+49 152 54 09 01 89
Fax
+49 4721­ 664319
E-Mail
info@jumplink.eu
USt-IdNr.
DE277453808

Verantwortliche/r i.S.d. § 55 Abs. 2 RStV
Pascal Garber, Bei der Kirche 12, 27476 Cuxhaven
JumpLink

JumpLink ist ein Netzwerk aus selbstständigen Designern und Programmierern.

Datenschutz
Die Datenschutzerklärung findest Du unter https://jumplink.eu/privacy

Online-Streitbeilegung gemäß Art. 14 Abs. 1 ODR-VO
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/.
Wir sind zur Teilnahme an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle weder verpflichtet noch bereit.

Mitglied der Initiative "Fairness im Handel".
Informationen zur Initiative: fairness-im-handel.de