# PictureBox

The `PictureBox` control displays graphics from bitmap, metafile, icon, JPEG, GIF, or PNG files.

Set the `Image` property to display an image at design time or runtime. Alternatively, specify the image using the `ImageSource` property and load it synchronously with the `Load` method or asynchronously with `LoadAsync`.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Size Modes

The `SizeMode` property manages image placement and control sizing with several preset configurations:

* `AutoSize`: The `PictureBox` is sized equal to the size of the image that it contains.

![PictureBox demonstrating AutoSize mode with image at original dimensions](/files/-MeCFQQLLI2TNE9ygxAM)

* `CenterImage`: The image is centered in the `PictureBox`. If the image is larger, it is centered and the outside edges are clipped.

![PictureBox showing CenterImage mode with centered image placement](/files/-MeCFXDqvPs1qetYLYHP)

* `Cover`: The image is resized to cover the entire container, maintaining aspect ratio while potentially cropping edges.

![PictureBox displaying Cover mode with image filling the entire container](/files/-MeCGveG_2T7di0IfpY8)

* `Normal`: The image is placed in the upper-left corner. The image is clipped if larger than the `PictureBox`.

![PictureBox showing Normal mode with image aligned to top-left](/files/-MeCFCM12uW72I5I3fnd)

* `Stretch`: The image is stretched or shrunk to fit the size of the `PictureBox`.

![PictureBox demonstrating Stretch mode with image scaled to fit](/files/-MeCFJEMgMRu-aM0YjuZ)

* `Zoom`: The image is scaled maintaining its aspect ratio.

![PictureBox showing Zoom mode with proportionally scaled image](/files/-MeCGo3Ep3boBgbmdOBC)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                         |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.PictureBox"                                                                                              |
| Theme appearance | "picturebox", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                           |
| Child components | "image" is the image element. See [JavaScript](/docs/concepts/javascript-object-model.md).                          |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |


---

# 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.wisej.com/docs/controls/content/picturebox.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.