# Image

<div align="left"><figure><img src="/files/E43pMWiCq8DSFasVG4Pv" alt="" width="67"><figcaption><p>Image element</p></figcaption></figure></div>

Available under the 'Media' category, the **`Image`** element allows you to display images.

***

## Sizing the image

By default, the image element adjusts its width based on the parent element it is contained within. The height of the image is automatically adjusted to preserve its aspect ratio.

You can change the size of the image using the following ways:

#### Border dragging

You can resize images by using the rectangular notches that appear when you select the element. The aspect ratio of the image is maintained during the resizing process.

<div align="left"><figure><img src="/files/sGYh08Lj4ivGLiwzSwFl" alt="" width="464"><figcaption><p>Resizing Images</p></figcaption></figure></div>

#### Custom CSS Classes

Set [Custom CSS classes](/app-editor/page-editor/page-element-settings.md#custom-css-classes) in the Options tab in the element settings for the **`Image`** element.

#### Design Tab

Set the values for *Width*, *Maximum Width*, *Height*, *Maximum Height* in the ***Sizing*** category.

***

## Options

The [Options tab](/app-editor/page-editor/page-element-settings.md#options-tab) settings for this element are described below:

### `Image Location`

Specifies the URL of the image you want to display. You can set this to an external URL or the URL of an image from the app's Media Library (see **`Select from Media Library`** below).

### `Image Description`

Provide a textual description of the image. This is useful for scenarios where the browser does not display the image.&#x20;

### `Select from Media Library`

Allows you to select an image from the app's Media Library. It automatically sets the **`Image Location`** to the URL of the image selected.

### `Auto Sizing`

Ensures that the image width fits in the area of the parent element it is inside. The height of the image is adjusted to maintain its aspect ratio.

### `Dynamic Content`

{% hint style="warning" %}
NOTE: This setting only appears for Image elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design.md) element.&#x20;
{% endhint %}

When this setting is ON, it enables you to set the name of the placeholder field (see **`Field Name`** setting below) with which the value of the [**`Image Location`**](#image-location) setting will be dynamically provided using [Page Flow](/app-editor/page-flow.md).

### `Field Name`

{% hint style="warning" %}
NOTE: This setting only appears for Image elements inside a [Data Design](/app-editor/page-editor/built-in-elements/data-design.md) element.&#x20;
{% endhint %}

When the Dynamic Content setting is ON, this setting contains the name of the placeholder field with which the value of the [**`Image Location`**](#image-location) setting will be dynamically provided using [Page Flow](/app-editor/page-flow.md).

{% hint style="info" %}
For a general information about images see:&#x20;

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img>
{% endhint %}


---

# 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://docs.zingy.ai/app-editor/page-editor/built-in-elements/image.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.