Overview
Sources
Libraries
Images API

Contain Mode contain

Specifies the mode that will be used to peform contain resize when mode=contain is used.

Values

Accepted values for this parameter are color, blur, mirror and clamp.

The default value of this parameter is color.

Color

Color contain mode will fill the letterboxed areas of the contain resize with the color specified by contain-color parameter.

If contain-color is not specified a fully transparent color will be used and the final color will be affected by background-color parameter.

In this example we are simply setting the resize mode to be contain with mode=contain. Because default contain mode is color we don't need to specify it:

GET
https://assets.imglab-cdn.net/woman-03.jpeg?width=1200&height=600&mode=contain
Woman posing image with a white letterboxed background area using contain mode.
x px

Here we apply a different filling color with contain-color=black parameter:

GET
https://assets.imglab-cdn.net/woman-03.jpeg?width=1200&height=600&mode=contain&contain-color=black
Woman posing image with a black letterboxed background area using contain mode and contain-color parameter with black value.
x px

Blur

Blur contain mode will fill the letterboxed areas with a blurred version of the base image.

In this example we are specifying the contain mode with contain=blur:

GET
https://assets.imglab-cdn.net/woman-03.jpeg?width=1200&height=600&mode=contain&contain=blur
Woman posing image with a blurred letterboxed background area using contain mode and contain parameter with blur value.
x px

Mirror

Mirror contain mode will fill the letterboxed areas with a mirrored version of the base image.

In this example we are specifying the contain mode with contain=mirror:

GET
https://assets.imglab-cdn.net/woman-03.jpeg?width=1200&height=600&mode=contain&contain=mirror
Woman posing image with a mirrored letterboxed background area using contain mode and contain parameter with mirror value.
x px

Clamp

Clamp contain mode will fill the letterboxed areas extending and copying the edge pixels of the image.

In this example we are specifying the contain mode with contain=clamp:

GET
https://assets.imglab-cdn.net/woman-03.jpeg?width=1200&height=600&mode=contain&contain=clamp
Woman posing image with a extended letterboxed background area using contain mode and contain parameter with clamp value.
x px