# MEDIAOPTION

## Constants Summarized

| Type                                                     | Name                      | Summary                                                                          |
| -------------------------------------------------------- | ------------------------- | -------------------------------------------------------------------------------- |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [CROP](#crop)             | Constant used when setting the media option for components which display images. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [ENLARGE](#enlarge)       | Constant used when setting the media option for components which display images. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [KEEPASPECT](#keepaspect) | Constant used when setting the media option for components which display images. |
| [Number](/reference/servoycore/dev-api/js-lib/number.md) | [REDUCE](#reduce)         | Constant used when setting the media option for components which display images. |

## Constants Detailed

### CROP

Constant used when setting the media option for components which display images.\
Makes the image be displayed at its original size. If the component is smaller\
than the image, then only a part of the image will show up.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var bigBytes = plugins.file.readFile('d:/big.jpg');
var bigImage = solutionModel.newMedia('big.jpg', bigBytes);
var smallBytes = plugins.file.readFile('d:/small.jpg');
var smallImage = solutionModel.newMedia('small.jpg', smallBytes);
var smallLabelWithBigImageCrop = form.newLabel('', 130, 10, 50, 50);
smallLabelWithBigImageCrop.imageMedia = bigImage;
smallLabelWithBigImageCrop.background = 'yellow';	
smallLabelWithBigImageCrop.mediaOptions = SM_MEDIAOPTION.CROP;
var bigLabelWithSmallImageCrop = form.newLabel('', 10, 290, 200, 100);
bigLabelWithSmallImageCrop.imageMedia = smallImage;
bigLabelWithSmallImageCrop.background = 'yellow';
bigLabelWithSmallImageCrop.mediaOptions = SM_MEDIAOPTION.CROP; // This does not do any cropping actually if the label is larger than the image.
```

### ENLARGE

Constant used when setting the media option for components which display images.\
Makes the image be scaled up to fit the size of the component, if the component is\
larger than the image. Can be used in combination with KEEPASPECT in order to preserve\
the aspect ratio of the image.

It can also be used in combination with REDUCE, to cover all possibilities when\
the size of the component is not known upfront.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var smallBytes = plugins.file.readFile('d:/small.jpg');
var smallImage = solutionModel.newMedia('small.jpg', smallBytes);
var bigLabelWithSmallImageEnlargeKeepAspect = form.newLabel('', 10, 70, 200, 100);
bigLabelWithSmallImageEnlargeKeepAspect.imageMedia = smallImage;
bigLabelWithSmallImageEnlargeKeepAspect.background = 'yellow';
bigLabelWithSmallImageEnlargeKeepAspect.mediaOptions = SM_MEDIAOPTION.ENLARGE | SM_MEDIAOPTION.KEEPASPECT;
var bigLabelWithSmallImageEnlargeNoAspect = form.newLabel('', 10, 180, 200, 100);
bigLabelWithSmallImageEnlargeNoAspect.imageMedia = smallImage;
bigLabelWithSmallImageEnlargeNoAspect.background = 'yellow';
bigLabelWithSmallImageEnlargeNoAspect.mediaOptions = SM_MEDIAOPTION.ENLARGE;
```

### KEEPASPECT

Constant used when setting the media option for components which display images.\
Can be used in combination with REDUCE and/or ENLARGE, to maintain the aspect\
ratio of the image while it is scaled down or up.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var bigBytes = plugins.file.readFile('d:/big.jpg');
var bigImage = solutionModel.newMedia('big.jpg', bigBytes);
var smallBytes = plugins.file.readFile('d:/small.jpg');
var smallImage = solutionModel.newMedia('small.jpg', smallBytes);
var smallLabelWithBigImageReduceKeepAspect = form.newLabel('', 10, 10, 50, 50);
smallLabelWithBigImageReduceKeepAspect.imageMedia = bigImage;
smallLabelWithBigImageReduceKeepAspect.background = 'yellow';	
smallLabelWithBigImageReduceKeepAspect.mediaOptions = SM_MEDIAOPTION.REDUCE | SM_MEDIAOPTION.KEEPASPECT;
var bigLabelWithSmallImageEnlargeKeepAspect = form.newLabel('', 10, 70, 200, 100);
bigLabelWithSmallImageEnlargeKeepAspect.imageMedia = smallImage;
bigLabelWithSmallImageEnlargeKeepAspect.background = 'yellow';
bigLabelWithSmallImageEnlargeKeepAspect.mediaOptions = SM_MEDIAOPTION.ENLARGE | SM_MEDIAOPTION.KEEPASPECT;
```

### REDUCE

Constant used when setting the media option for components which display images.\
Makes the image be scaled down to fit the size of the component, if the component\
is smaller than the image. It can be used in combination with KEEPASPECT in order\
to preserve the aspect ratio of the image.

It can also be used in combination with ENLARGE, to cover all possibilities when\
the size of the component is not known upfront.

**Type**\
[Number](/reference/servoycore/dev-api/js-lib/number.md)

**Sample**

```js
var bigBytes = plugins.file.readFile('d:/big.jpg');
var bigImage = solutionModel.newMedia('big.jpg', bigBytes);
var smallLabelWithBigImageReduceKeepAspect = form.newLabel('', 10, 10, 50, 50);
smallLabelWithBigImageReduceKeepAspect.imageMedia = bigImage;
smallLabelWithBigImageReduceKeepAspect.background = 'yellow';	
smallLabelWithBigImageReduceKeepAspect.mediaOptions = SM_MEDIAOPTION.REDUCE | SM_MEDIAOPTION.KEEPASPECT;
var smallLabelWithBigImageReduceNoAspect = form.newLabel('', 70, 10, 50, 50);
smallLabelWithBigImageReduceNoAspect.imageMedia = bigImage;
smallLabelWithBigImageReduceNoAspect.background = 'yellow';	
smallLabelWithBigImageReduceNoAspect.mediaOptions = SM_MEDIAOPTION.REDUCE;
```


---

# 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.servoy.com/reference/servoycore/dev-api/solutionmodel/mediaoption.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.