> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/produktbilder/bildformat.md).

# Bildformat

Das Theme unterstützt die Ermittlung des Seitenverhältnis Deiner Produktbilder, welche für Produktlistings und Produkt Image Galerie genutzt werden.

## Seitenverhältnis

### Option A - Vorgegebene Seitenverhältnisse

Über das Feld **\[!]Seitenverhältnis Artikelbilder (1)** kannst Du ein Seitenverhältnis für die Anzeige Deiner Bilder festlegen.

### Option B - Berechnetes Seitenverhältnis

Über die Felder **Breite Artikelbild** und **Höhe Artikelbild** errechnen wir das **optimale Seitenverhältnis** Deiner Produktbilder. Dazu musst Du nur einmalig die Breite sowie die Höhe Deiner Artikelbilder in Pixeln eingeben. Den Rest übernimmt das Theme für Dich.

{% hint style="info" %}
Haben Deine Produktbilder unterschiedliche Seitenverhältnisse, ist **Option A - Vorgegebene Seitenverhältnisse** eventuell die bessere Option für Dich.
{% endhint %}

![Theme-Konfiguration: Tab: Allgemein > Block: Produktbilder](/files/AbnXIe7SnPbPUbTAuTOm)

### Der Vorteil im Detail erklärt:

Bei der Darstellung der Produktbilder **ohne Seitenverhältnis** verändert sich das Bildformat permanent mit jeder Viewport-Breite. Dadurch hast Du wenig Kontrolle über Deine Artikelbilder.

Produktbilder lassen sich nicht proportional skalieren, der Bildbereich des Bildes hat eine feste Höhe. Das Bild wird entweder beschnitten oder es entsteht ein Leerraum.

![Standardverhalten in Shopware](/files/Ec1FbL0VxC1UPVdqd0BC)

#### Theme Vorteil - Das Seitenverhältnis nutzen

Bei der Anzeige von Produktbildern unter Berücksichtigung des Seitenverhältnisses ändert sich das Bildseitenverhältnis nicht. Dadurch haben Sie mehr Kontrolle darüber, wie Ihre Produktbilder angezeigt werden.

{% hint style="success" %}
Durch die Angabe des Seitenverhältnisses skalieren wir den Bildbereich **proportional**.
{% endhint %}

**Vorteile:**

* [x] **Bilder skalieren proportional - es entstehen keine Weißräume über und unter den Bildern**
* [x] **Bilder werden nicht angeschnitten und passen sich ein**

![Optimiertes Verhalten durch unsere Themes](/files/zOy2lQz9cOvPnuxp4luo)