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 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.

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

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 für Anita Hass im Seitenverhältnis 16:9