# Fit

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.

<mark style="color:orange;">**func=fit**</mark>

{% hint style="info" %}
Please note that by default, smaller images will not be upscaled to fit the box. If you want to enable this behavior, you need to use <mark style="color:orange;">**fit\_enlarge=1**</mark>. along with <mark style="color:orange;">**func=fit**</mark>.
{% endhint %}

The padding can be customized using the following additional operations:

<table><thead><tr><th width="173.33333333333331">Operation</th><th>Syntax</th><th>Description</th></tr></thead><tbody><tr><td>gravity</td><td><mark style="color:orange;"><strong>gravity=X</strong></mark><br><code>X=[north|south][east|west]</code></td><td>sets the position of the image in the fit box</td></tr><tr><td>margin</td><td><mark style="color:$warning;"><strong>margin=X</strong></mark></td><td>defines a minimum margin when fitting the image in the new canvas</td></tr><tr><td>solid background</td><td><mark style="color:orange;"><strong>bg_color=X</strong></mark> | <mark style="color:orange;"><strong>bg_colour=X</strong></mark><br><code>X={hex color}|auto</code></td><td>defines a background color with a hex code, color name or automatically, based on the image palette</td></tr><tr><td>blurred background</td><td><mark style="color:orange;"><strong>bg_img_fit=1</strong></mark></td><td>sets blurred image background</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_blur=X</strong></mark></td><td>applies Gaussian blur to the background image</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_opacity=X</strong></mark><br><code>X=0..1</code></td><td>specifies background image opacity</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_colorize=X</strong></mark> | <mark style="color:orange;"><strong>bg_colourise=X</strong></mark></td><td>defines a color to tint the background image</td></tr><tr><td></td><td><mark style="color:orange;"><strong>bg_gravity=X</strong></mark><br><code>X=[north|south][east|west]</code></td><td>defines the positioning of the background image within its container</td></tr><tr><td>image upscaling</td><td><mark style="color:orange;"><strong>fit_enlarge=1</strong></mark></td><td>allows upscaling smaller images to the desired dimensions (will result in inferior image resolution)</td></tr></tbody></table>

## Gravity

| <mark style="color:orange;">**northwest**</mark>                                                                          | <mark style="color:orange;">**north**</mark>                                                             | <mark style="color:orange;">**northeast**</mark> |
| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| <mark style="color:orange;">**west**</mark>                                                                               | <mark style="color:orange;">**center**</mark> \| <mark style="color:orange;">**centre**</mark> (default) | <mark style="color:orange;">**east**</mark>      |
| <mark style="color:orange;">**southwest**</mark>                                                                          | <mark style="color:orange;">**south**</mark>                                                             | <mark style="color:orange;">**southeast**</mark> |
| <mark style="color:$warning;">**trim**</mark> - [more info](https://docs.cloudimage.io/transformations/trim#trim-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

<mark style="color:$warning;">**margin=X**</mark>

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.

{% hint style="info" %}
When using a margin alongside **`trim=X`** and **`gravity=trim`**, if a successful trim is performed, the margins on the non-trimmed side is removed. For more details, see the [trim](https://docs.cloudimage.io/transformations/image-operations/trim "mention") operation.
{% endhint %}

## Examples

| Preview                                                                                                                               | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/oVHOXaV7oS7xYV671lez/image.png)                                    | <p>Solid background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/hotel.jpg?w=400&#x26;h=245&#x26;func=fit&#x26;bg_color=000">/samples.scaleflex.com/hotel.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=000</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/DSaPpR5t6879UNOJXPcA/image.png)                                    | <p>Automatic solid background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/frog.png?func=fit&#x26;w=400&#x26;h=220&#x26;bg_colour=auto">/samples.scaleflex.com/frog.png?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=220</strong></mark>&<mark style="color:orange;"><strong>bg\_colour=auto</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/5Y6qfCjXkp0Tvu5QSIZO/image.png)                                    | <p>Blurred background:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/car1.jpg?w=400&#x26;h=320&#x26;func=fit&#x26;bg_img_fit=1&#x26;bg_opacity=0.75">/samples.scaleflex.com/car1.jpg?<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=320</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.75</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                        |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/7kUUV7vnuZ1JWV45e3My/image.png)                                    | <p>Blurred background, tinted:<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/boat.jpg?func=fit&#x26;w=400&#x26;h=330&#x26;bg_img_fit=1&#x26;bg_opacity=0.5&#x26;bg_colorize=red">/samples.scaleflex.com/boat.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>w=400</strong></mark>&<mark style="color:orange;"><strong>h=330</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=red</strong></mark></a></p>                                                                                                                                                                                                                                                                                                        |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/YSDSkCrn9LfNtvkLJN0f/image.png" alt="" data-size="original"> | <p>Align Background image to right (east gravity):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=fit&#x26;width=600&#x26;height=600&#x26;q=70&#x26;bg_img_fit=1&#x26;bg_blur=15&#x26;bg_gravity=east&#x26;bg_colorize=lc000000&#x26;bg_opacity=0.5">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>width=600</strong></mark>&<mark style="color:orange;"><strong>height=600</strong></mark>&<mark style="color:orange;"><strong>q=70</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_blur=15</strong></mark>&<mark style="color:orange;"><strong>bg\_gravity=east</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=lc000000</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark></a></p> |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/LMI3xcE1Ob7pgPczaGf2/image.png" alt="" data-size="original"> | <p>Align Background image to left (west gravity):<br><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/classroom.jpg?func=fit&#x26;width=600&#x26;height=600&#x26;q=70&#x26;bg_img_fit=1&#x26;bg_blur=15&#x26;bg_gravity=west&#x26;bg_colorize=lc000000&#x26;bg_opacity=0.5">/samples.scaleflex.com/classroom.jpg?<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>width=600</strong></mark>&<mark style="color:orange;"><strong>height=600</strong></mark>&<mark style="color:orange;"><strong>q=70</strong></mark>&<mark style="color:orange;"><strong>bg\_img\_fit=1</strong></mark>&<mark style="color:orange;"><strong>bg\_blur=15</strong></mark>&<mark style="color:orange;"><strong>bg\_gravity=west</strong></mark>&<mark style="color:orange;"><strong>bg\_colorize=lc000000</strong></mark>&<mark style="color:orange;"><strong>bg\_opacity=0.5</strong></mark></a></p>  |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/KwRyIt3nU7DtReej6Zmw/image.png" alt="" data-size="original"> | <p>No upscaling of smaller images (default):</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/castle_doc.jpg?w=600&#x26;h=245&#x26;func=fit&#x26;bg_color=113650">/samples.scaleflex.com/castle\_doc.jpg?<mark style="color:orange;"><strong>w=600</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=113650</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/XmfKPAiPYsbkQRwvsFR3/image.png" alt="" data-size="original"> | <p>Upscaling allowed:</p><p><a href="https://doc.cloudimg.io/https://samples.scaleflex.com/castle_doc.jpg?w=600&#x26;h=245&#x26;func=fit&#x26;bg_color=113650&#x26;fit_enlarge=1">/samples.scaleflex.com/castle\_doc.jpg?<mark style="color:orange;"><strong>w=600</strong></mark>&<mark style="color:orange;"><strong>h=245</strong></mark>&<mark style="color:orange;"><strong>func=fit</strong></mark>&<mark style="color:orange;"><strong>bg\_color=113650</strong></mark>&<mark style="color:orange;"><strong>fit\_enlarge=1</strong></mark></a></p>                                                                                                                                                                                                                                                                                                                                                                                        |