fitMode

Sets or gets how an image is placed inside an image element.

Description

Setting the fitMode property sets what happens when an image element contains an image with dimensions that do not match the dimensions of the element as set in the Editor.

The value can be set to one of "fill", "fit", or "fixedWidth".

Important: The fitMode property doesn't affect images from the web. Learn more about different options for your image's src.

The descriptions below contain sample scenarios that place the following images into an image element, where the size of the image element is 100x100.

fitMode example images

"fill": Fills the entire image element. The image is resized (meaning enlarged or reduced), maintaining its original aspect ratio, so that there is no empty area in the image element. When an image is resized, the center of the original image is shown in the image element and the part of the original image that does not fit into the image element is not shown.
"fit": Fits the entire image in the image element. If the image is reduced, the image is centered in the image element and any empty space is filled in with the image element's border color and opacity.
"fixedWidth": The image element's width remains fixed and the image is enlarged or reduced, maintaining its original aspect ratio, so that it fits the image element's width. The image element's height is adjusted accordingly.

Getting the fitMode property returns the current fit mode.

Tip: To learn more, see this fitMode example.

Type:

stringRead & Write, default value is "fill"

Was this helpful?

Get the image fit mode

Copy Code

1let mode = $w("#myImage").fitMode; // "fixedWidth"

Set the image fit mode

Copy Code

1$w("#myImage").fitMode = "fixedWidth";