Fit
Fits the image in a box with padding when needed
Resizes the image to fit into a specified width and height box, adds padding (image or solid color) to keep proportions, and delivers the resulting image via CDN.
func=fit
The padding can be customized using the following additional operations:
gravity
gravity=X
X=[north|south][east|west]
sets the position of the image in the fit box
margin
margin=X
defines a minimum margin when fitting the image in the new canvas
solid background
bg_color=X | bg_colour=X
X={hex color}|auto
defines a background color with a hex code, color name or automatically, based on the image palette
blurred background
bg_img_fit=1
sets blurred image background
bg_blur=X
applies Gaussian blur to the background image
bg_opacity=X
X=0..1
specifies background image opacity
bg_colorize=X | bg_colourise=X
defines a color to tint the background image
bg_gravity=X
X=[north|south][east|west]
defines the positioning of the background image within its container
image upscaling
fit_enlarge=1
allows upscaling smaller images to the desired dimensions (will result in inferior image resolution)
Gravity
When using func=fit along with (trim=X), you can set gravity=trim. This way, upon a successful trim, the gravity will be resolved to a compass position so that the canvas will not be extended on the non-trimmed edges.
Margin
margin=X
If only one value is provided (margin=X), this sets the same minimum margin for all four edges. When two values are provided (margin=V,H), this sets the vertical (top and bottom) and horizontal (left and right) margins. If four values are listed (margin=N,E,S,W), they refer to the four image edges - north (top), east (right), south (bottom) and west (left).
By default, the margin is defined in pixels and applied before resizing. Alternatively, you can also use percentages (eg. margin=5p) of the destination size or absolute values in pixels (margin=100a) to define the margins.
Examples

Solid background: /samples.scaleflex.com/hotel.jpg?w=400&h=245&func=fit&bg_color=000

Automatic solid background: /samples.scaleflex.com/frog.png?func=fit&w=400&h=220&bg_colour=auto


Blurred background, tinted: /samples.scaleflex.com/boat.jpg?func=fit&w=400&h=330&bg_img_fit=1&bg_opacity=0.5&bg_colorize=red

Align Background image to right (east gravity): /samples.scaleflex.com/classroom.jpg?func=fit&width=600&height=600&q=70&bg_img_fit=1&bg_blur=15&bg_gravity=east&bg_colorize=lc000000&bg_opacity=0.5

Align Background image to left (west gravity): /samples.scaleflex.com/classroom.jpg?func=fit&width=600&height=600&q=70&bg_img_fit=1&bg_blur=15&bg_gravity=west&bg_colorize=lc000000&bg_opacity=0.5

No upscaling of smaller images (default):
/samples.scaleflex.com/castle_doc.jpg?w=600&h=245&func=fit&bg_color=113650
Last updated
Was this helpful?


