# Crop

Resizes and crops the image to specified dimensions (**width** and **height**) while keeping proportions. The resulting image is then compressed and delivered via CDN.

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

{% hint style="info" %}
This is the default resizing mode when both **width** and **height** operations are used. You do not need to specify **func=crop** explicitly.
{% endhint %}

## Examples

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                 |
| -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/Aqjyg6XdI38gniJFgR1O/image.png) | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**func=crop**</mark>&<mark style="color:orange;">**w=600**</mark>&<mark style="color:orange;">**h=310**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?func=crop\&w=600\&h=310) |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/S2c9CbmMONn15pTBanws/image.png) | [/samples.scaleflex.com/birds.jpg?<mark style="color:orange;">**w=600**</mark>&<mark style="color:orange;">**h=410**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/birds.jpg?w=600\&h=410)                                                             |

## Gravity

Specifies which part of the image you wish to keep while cropping. If you omit the gravity option, central cropping is performed.

<mark style="color:orange;">**gravity=X**</mark>

### Available gravity values

| <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:orange;">**auto**</mark> - [more info](https://docs.cloudimage.io/transformations/image-operations/automatic-gravity-crop#automatic-gravity-legacy) | <mark style="color:orange;">**face**</mark> - [more info](https://docs.cloudimage.io/transformations/image-operations/automatic-gravity-crop#face-gravity) | <mark style="color:orange;">**smart**</mark> - [more info](https://docs.cloudimage.io/transformations/image-operations/automatic-gravity-crop#smart-gravity) |
| <mark style="color:orange;">**X,Y**</mark> - [more info](https://docs.cloudimage.io/transformations/image-operations/crop/focal-point-crop)                            | <mark style="color:$warning;">**trim**</mark> - [more info](https://docs.cloudimage.io/transformations/trim#trim-gravity)                                  |                                                                                                                                                              |

### Examples

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/f9clyK3mU9SrVlQkssOD/image.png) | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**w=500**</mark>&<mark style="color:orange;">**h=430**</mark>&<mark style="color:orange;">**gravity=west**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?w=500\&h=430\&gravity=west) |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/INTl0jl4HJoJ40fD17aJ/image.png) | [/samples.scaleflex.com/paris-salon2.jpg?<mark style="color:orange;">**w=500**</mark>&<mark style="color:orange;">**h=430**</mark>&<mark style="color:orange;">**gravity=east**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/paris-salon2.jpg?w=500\&h=430\&gravity=east) |