> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/dynamic-media-optimization-dmo/transformations/image-optimization/operations/fit.md).

# 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.

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

The padding can be customised 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>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_colourise=X</strong></mark> | <mark style="color:orange;"><strong>bg_colorize=X</strong></mark></td><td>defines a color to tint the background image</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> |

## Examples

| Preview                                                                                                                                                                                                             | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FrTyB8t65tNDuwIrAoQhE%2Fimage.png?alt=media\&token=fb9df57c-3e6f-4584-8fbb-1cf273a61ff3) | <p>Solid background:<br><a href="https://fdocs.filerobot.com/docs/hotel.jpg?w=400&#x26;h=245&#x26;func=fit&#x26;bg_color=000">/docs/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://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FoZZkoq8f9XZviQN35DX4%2Fimage.png?alt=media\&token=f020e854-b515-4610-8d9d-7ba5214ef2de) | <p>Automatic solid background:<br><a href="https://fdocs.filerobot.com/docs/frog.png?func=fit&#x26;w=400&#x26;h=220&#x26;bg_colour=auto">/docs/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://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FZ7T7t4JtTmOqraT3IwPk%2Fimage.png?alt=media\&token=6de6c864-bb98-47ac-a851-79ffd7728a77) | <p>Blurred background:<br><a href="https://fdocs.filerobot.com/docs/car1.jpg?w=400&#x26;h=320&#x26;func=fit&#x26;bg_img_fit=1&#x26;bg_opacity=0.75">/docs/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://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FLIDtOG3jTMUESgb0YW9N%2Fimage.png?alt=media\&token=564ec184-1245-4aa9-a462-45315049bde0) | <p>Blurred background, tinted:<br><a href="https://fdocs.filerobot.com/docs/boat.jpg?func=fit&#x26;w=400&#x26;h=330&#x26;bg_img_fit=1&#x26;bg_opacity=0.5&#x26;bg_colorize=red">/docs/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><br></p> |
|                                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |