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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://themedocs.zenit.design/content/produktbilder/bildformat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.