1. Home
  2. Actions & Qualifiers
  3. Resize

Resize

Description

Determines how to crop, scale, and/or zoom the delivered asset according to the requested dimensions.

Examples

Scaling an image


			import {Cloudinary} from "@cloudinary/url-gen";
			import {scale, fit, pad, crop} from '@cloudinary/url-gen/actions/resize';
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const image = yourCldInstance.image('woman');
			
			image.resize( scale(100, 100) );
			// All resize actions have a similar interface.
			// image.resize( fit(100, 100)) );
			// image.resize( pad(100, 100)) );
			// image.resize( crop(100, 100)) );
			// However, Some actions have additional arguments exposed as builder methods.
			// See the documentation for each method for more information
			
			
			// Alternative syntax, using builder methods
			image.resize(
			 scale()
			   .width(100)
			   .height(100)
			);
			image.toString()

Cropping with automatic focus(Gravity)


			import {Cloudinary} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const image = yourCldInstance.image('woman');
			
			import {scale} from '@cloudinary/url-gen/actions/resize';
			import {autoGravity} from '@cloudinary/url-gen/qualifiers/gravity';
			
			image.resize( crop(100, 100).gravity(autoGravity()) );
			
			// Alternative syntax, using builder methods
			image.resize(
			 scale()
			   .width(100)
			   .height(100)
			   .gravity(autoGravity())
			);
			image.toString()
Details

actions/resize.ts, line 2

Learn more about Gravity and Focus here

Classes

new ResizeFitAction()

new ResizeLimitFillAction()

new ResizeLimitFitAction()

new ResizeLimitPadAction()

new ResizeMinimumFitAction()

new ResizeMinimumPadAction()

new ResizeCropAction()

new ResizeFillAction()

new ResizeScaleAction()

new ThumbResizeAction()

new ResizeAdvancedAction()

new ResizePadAction()

new ResizeAutoPadAction()

new ResizeSimpleAction( cropType, cropWidth, cropHeight )

Methods

<static> scale( width, height ) → {Actions.Resize.ScaleAction}

action

Description

Changes the size of the image exactly to the given width and height without necessarily retaining the original aspect ratio:
all original image parts are visible but might be stretched or shrunk.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 75

<static> imaggaScale( width, height ) → {Actions.Resize.ResizeSimpleAction}

action

Description

Scales your image based on automatically calculated areas of interest within each specific photo.

For details, see the Imagga Crop and Scale add-on documentation.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 89

<static> imaggaCrop( width, height ) → {Actions.Resize.ResizeSimpleAction}

action

Description

Crops your image based on automatically calculated areas of interest within each specific photo.

For details, see the Imagga Crop and Scale add-on documentation.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 103

<static> crop( width, height ) → {Actions.Resize.ResizeCropAction}

action

Description

Extracts a region of the given width and height out of the original image.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 114

<static> fill( width, height ) → {Actions.Resize.ResizeFillAction}

action

Description

Creates an image with the exact given width and height without distorting the image.
This option first scales up or down as much as needed to at least fill both of the given dimensions.

If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 128

<static> fit( width, height ) → {Actions.Resize.ResizeSimpleAction}

action

Description

The image is resized so that it takes up as much space as possible within a bounding box defined by the given width and height parameters.
The original aspect ratio is retained and all of the original image is visible.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 141

<static> pad( width, height ) → {Actions.Resize.ResizePadAction}

action

Description

Resizes the asset to fill the given width and height while retaining the original aspect ratio.

If the proportions of the original asset do not match the given width and height, padding is added to the asset to reach the required size.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 156

<static> limitFill( width, height ) → {Actions.Resize.ResizeLimitFillAction}

action

Description

Creates an asset with the exact given width and height without distorting the asset, but only if the original asset is larger than the specified resolution limits.

The asset is scaled down to fill the given width and height without distorting the asset, and then the dimension that exceeds the request is cropped. If the original dimensions are both smaller than the requested size, it is not resized at all.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 174

<static> limitFit( width, height ) → {Actions.Resize.ResizeSimpleAction}

action

Description

Resizes the asset so that it takes up as much space as possible within a bounding box defined by the given width and height parameters, but only if the original asset is larger than the given limit (width and height).

The asset is scaled down, the original aspect ratio is retained and all of the original asset is visible.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 189

<static> minimumPad( width, height ) → {Actions.Resize.ResizePadAction}

action

Description

Resizes the asset to fill the given width and height while retaining the original aspect ratio, but only if the original asset is smaller than the given minimum (width and height).

The asset is scaled up. If the proportions of the original asset do not match the given width and height, padding is added to the asset to reach the required size.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 205

<static> minimumFit( width, height ) → {Actions.Resize.ResizeSimpleAction}

action

Description

Resizes the asset so that it takes up as much space as possible within a bounding box defined by the given width and height parameters, but only if the original asset is smaller than the given minimum (width and height).

The asset is scaled up, the original aspect ratio is retained and all of the original asset is visible.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 220

<static> fillPad( width, height ) → {Actions.Resize.ResizePadAction}

action

Description

Tries to prevent a "bad crop" by first attempting to use the fill mode, but adding padding if it is determined that more of the original image needs to be included in the final image.

Especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio.

Only supported in conjunction with Automatic cropping.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 239

<static> thumbnail( width, height ) → {Actions.Resize.ThumbResizeAction}

action

Description

The thumb cropping mode is specifically used for creating image thumbnails from either face or custom coordinates,
and must always be accompanied by the gravity parameter set to one of the face detection or custom values.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 252

<static> auto( width, height ) → {Actions.Resize.ThumbResizeAction}

action

Description

Automatically determines the best crop based on the gravity and specified dimensions.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 264

<static> limitPad( width, height ) → {Actions.Resize.ResizePadAction}

action

Description

Resizes the asset to fill the given width and height while retaining the original aspect ratio, but only if the original asset is larger than the given limit (width and height).

The asset is scaled down. If the proportions of the original asset do not match the given width and height, padding is added to the asset to reach the required size.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 281

<static> autoPad( width, height ) → {Actions.Resize.ResizeAutoPadAction}

action

Description

Tries to prevent a "bad crop" by first attempting to use the auto cropping mode, but adding some padding if the algorithm determines that more of the original image needs to be included in the final image.

Parameters
Name Type Description
width number | string

The required width of a transformed asset.
height number | string

The required height of a transformed asset.
Returns
Details

actions/resize.ts, line 295