> 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/en/content/product-images/aspect-ratio.md).

# Aspect ratio

The theme uses the aspect ratio of your product images to improve the image displays in the product boxes and in the detail page gallery.

## Set up the aspect ratio

### Option A - Predefined aspect ratios

With the configuration **\[!] Aspect ratio product images (1)** you can select a aspect ratio from different predefined ratios.

### Option B - Calculated aspect ratio

But product images are not always available in predefined aspect ratios. Therefore, you can use the **\[!] Width product image (2)** and **\[!] Height product image (3)** fields to calculate the aspect ratio of your product images. Therefor you have to check the width and height one of your product images and insert the values in this configuration.

{% hint style="info" %}
If your product images have different aspect ratios, **Option A - Predefined aspect ratios** may be the better option for you.
{% endhint %}

![Theme configuration: Tab: General > Section: Product images](/files/rTHNS8RnAQFFHr3yiOkl)

### The advantage explained in detail:

When displaying product images **without considering the aspect ratio**, the image format changes permanently with each viewport width. This means that you have no control over your product images.

Product images do not scale proportionally, the image area of the image has a fixed height. The image is either cropped or white space is created.

![Standardverhalten in Shopware](/files/-MLNgbuoZ8ZQXRzGu2AY)

#### Theme advantage - Use the aspect ratio

When displaying product images **considering the aspect ratio**, the image aspect ratio does not change. This means you have more control over how your product images are displayed.

{% hint style="success" %}
By specifying the aspect ratio, we scale the image area **proportional**.
{% endhint %}

**Advantages:**

* [x] Images scale proportionally - there are no white spaces above and below the images
* [x] Images are not cropped and fit in

![Optimized image scaling through our themes](/files/-MLNgfLd0EYj3tm-XXyh)


---

# 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:

```
GET https://themedocs.zenit.design/en/content/product-images/aspect-ratio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.