fit

Owned by Joël DRIGO
Last updated: Aug 03, 2021
3 min read

Adapts the size of the image to fill a box as much as possible, but in such a way as to be completely visible, while respecting proportionality.

parameters

  • target size: size (*dimension values) of the new image (width and height). Default is size of the image.

  • gravity: gravity value, location of the image (center by default)

  • location: coordinates (x and y) of the center of the source image in the target image

  • fill color: color value, color to fill the empty space

  • trim: boolean (default false), remove empty space

JSON object properties

  • width: width of the new image

  • height: height of the new image

  • gravity: gravity

  • x: the x (easting) of the center point of the source image in the target image

  • y: the y (northing) of the center point of the source image in the target image

  • background (or color): color to fill the empty space. Only classic color or dominant color is allowed.

  • trim: true to remove empty space (x, y, gravity or background can’t be use if trim is true)

simplified syntax parameters

  • prefix w: the width of the target image

  • prefix h: the height of the target image

  • prefix g: the gravity

  • prefix x: the x (easting) of the center point of the source image in the target image

  • prefix y: the y (northing) of the center point of the source image in the target image

  • prefix bg: the color to fill empty space

array type parameters

The possible arrays are:

  • [width, height]

  • [gravity, width, height]

  • [color, width, height]

  • [color, gravity, width, height]

  • [gravity, color, width, height]

  • [x, y, width, height]

  • [gravity, x, y, width, height]

  • [color, x, y, width, height]

  • [color, gravity, x, y, width, height]

  • [gravity, color, x, y, width, height]

Example 1 - Fit, no gravity

{ "fit":[300,300] }

Maldives: W400×H225

Maldives: W300×H300

Simplified syntax: w_300,h_300,c_fit

Example 2 - Fit, with gravity

{ "fit":["north",300,300] }

Maldives: W400×H225

Maldives: W300×H300

Simplified syntax: g_north,w_300,h_300,c_fit

Example 3 - Fit, with color background

{ "fit":["aquamarine",300,300] }

 

Maldives: W400×H225

Maldives: W300×H300

Simplified syntax: bg_aquamarine,w_300,h_300,c_fit

Example 4 - Fit, with trim

Maldives: W400×H225

Maldives: W300×H168

The change of scale is the same as for the fit without trim, but the size of the final image is different, because the empty space is removed.