Fit
Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions, and delivers the resulting image via CDN.
func=fit
The padding can be customised using the following additional operations:
| function | name | description |
|---|---|---|
| gravity | gravity=X X = [north | south][east | west] | sets the position of the image in the fit box |
| solid background | bg_colour=X | bg_color=X | defines a background colour either with a hex code or colour name |
| bg_colour=auto | bg_color=auto | extracts the most prominent colour from the image and uses it as a background colour | |
| 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_colourise=X | bg_colorize=X | defines a colour to tint the background image |
Solid colour padding
/sample.li/car1.jpg?w=400&h=320& func=fit&bg_color=black
For details, please see the solid background section.
Blurred background
/sample.li/car1.jpg?w=400&h=320& func=fit&bg_img_fit=1&bg_opacity=0.75
All options are listed in the blurred background section.
The gravity=X operation sets the position of the image when padding is added. Possible values are:
| northwest | north | northeast |
|---|---|---|
| west | centre | center | east |
| southwest | south | southeast |
If not explicitly set, the default gravity is centre.
For example, by setting gravity to south, the image is positioned at the bottom and the padding is added at the top.
Fit to 250x250px, centre gravity
/sample.li/earth.jpg?func=fit& w=250&h=250&bg_colour=10100E& gravity=centre
Fit to 250x250px, south gravity
/sample.li/earth.jpg?func=fit& w=250&h=250&bg_colour=10100E& gravity=south
Default behaviour
/sample.li/castle_doc.jpg?w=500&h=200& func=fit&bg_colour=b6d6f0
Here, a 400x100-pixel image is fitted into a canvas of 500x200 pixels.
Enabled upscaling
/sample.li/castle_doc.jpg?w=500&h=200& func=fit&bg_colour=b6d6f0&fit_enlarge=1
With the fit_enlarge=1 option, the image is upscaled and then fitted into the 500x200-pixel canvas.
Setting image margins
If you requre a specific amount margin (solid color or transparent) between the original image and the image borders, you can use the margin=Xp parameter (X is in percent of the resized image). When the aspect ration does not allow the margin to be satisfied both horizontally and vertically, it will be treated as a minimum margin.
Absolute mimimum margin
For precise position of the image in the canvas, you can define minimum margins from each side in pixels by using the margin=Xa parametes (absolute margin in pixels). Instead of setting equal margins, the syntax margin=Na,E,S,W will define the minimum absolute margins on the North, East, South and West side of the image.