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 contain=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 contain=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 contain=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 contain=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