> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/basic-knowledge/images/display-mode-for-images.md).

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