# 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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-c96e8527cc93b268deb5ab0102da12a27b004ec9%2Fimage.png?alt=media)

* `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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-09025a8b3b2dc383a29069748239863194da9128%2Fimage.png?alt=media)

* `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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-0d48644fea00e37eb9ab96f208a2cc7860d4ab8d%2Fimage.png?alt=media)

* `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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-f40f414b06b9af2e50b855f46cc9afad6d3b139c%2Fimage.png?alt=media)

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

![PictureBox demonstrating Stretch mode with image scaled to fit](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-dec46a46c5e7d46667fbef588a846fbd16dbdf26%2Fimage.png?alt=media)

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

![PictureBox showing Zoom mode with proportionally scaled image](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-dfe66b9a4e7e136c25636e7a7d8bbb8cd3d917e0%2Fimage.png?alt=media)

## 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](https://docs.wisej.com/docs/concepts/javascript-object-model).       |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |