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:
Operation | Syntax | Description |
---|---|---|
gravity | gravity=X
| sets the position of the image in the fit box |
solid background | bg_color=X | bg_colour=X
| 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
| specifies background image opacity | |
bg_colorize=X | bg_colourise=X | defines a color to tint the background image | |
bg_gravity=X
| defines the positioning of the background image within its container |
Gravity
northwest | north | northeast |
west | center | centre (default) | east |
southwest | south | southeast |
Examples
Preview | Syntax |
---|---|
Solid background: /sample.li/hotel.jpg?w=400&h=245&func=fit&bg_color=000 | |
Automatic solid background: /sample.li/frog.png?func=fit&w=400&h=220&bg_colour=auto | |
Blurred background: /sample.li/car1.jpg?w=400&h=320&func=fit&bg_img_fit=1&bg_opacity=0.75 | |
Blurred background, tinted: /sample.li/boat.jpg?func=fit&w=400&h=330&bg_img_fit=1&bg_opacity=0.5&bg_colorize=red | |
Align Background image to east: /sample.li/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 west: /sample.li/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 |
Last updated