# Display mode of images

The "Display mode" determines how an image should be adjusted in size in order to fit into its image container.

## contain

#### also called "Fixed height"

The image keeps its aspect ratio, but will be adjusted to fit within the given height of the image container.

This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

![Photo by Jeremy Bezanger on Unsplash](/files/260K7u4MR1SGYpACkRRh) ![](/files/uaTGY5DbvFNC9nCAPym1)

## cover

#### also called "Cropped"

The size of the image is adjusted so that the aspect ratio is retained and the entire image container is filled. Any overflow is cropped.

In this mode, the image container is filled in each viewport. This results in the image being 'cut off' on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

![Photo by Jeremy Bezanger on Unsplash](/files/UywysHFkV1rRW0ZeFSjK) ![](/files/VBxRslGKU0yNHdrz5iLO)

## stretch

#### also called "Scaled"

The image is scaled to the width of the image container without any height restrictions.

This means that there may be gaps on the top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

<div><figure><img src="/files/k99O6qiz0Ahf9lCAAMh0" alt=""><figcaption><p>Photo by Jeremy Bezanger on Unsplash</p></figcaption></figure> <figure><img src="/files/519BtGnjqzMRBJ08XQCG" alt=""><figcaption></figcaption></figure></div>

## none

#### also called "Original" or "Standard"

The image size will not be changed.

![Photo by Jeremy Bezanger on Unsplash](/files/rvMF6PPZq39NTaDjp3eG) ![](/files/KX3X4SZh0ENl45dX0flv)

## scale-down

The image will be scaled down to the smallest version of 'none' or 'container'.

This means that there may be gaps on the left and right or top and bottom if the aspect ratio of the image in a viewport does not match the aspect ratio of the image container.

![Photo by Jeremy Bezanger on Unsplash](/files/260K7u4MR1SGYpACkRRh) ![](/files/uaTGY5DbvFNC9nCAPym1)


---

# Agent Instructions: 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://knowledge.themeware.design/knowledge-base/basic-knowledge/images/display-mode-for-images.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.
