> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Image crop modes


When the dimensions you want to deliver differ from your original image, you can either crop the image to fit or pad it with extra space. Crop modes control how Cloudinary crops the image, determining which part to keep, whether to scale first, and how aggressively to crop. This page covers `fill`, `lfill`, `fill_pad`, `crop`, `thumb`, `auto`, and `auto_pad`. For resize-padding modes (`pad`, `lpad`, `mpad`) see [Image padding modes](image_padding_modes), and for resize-only modes (`scale`, `fit`, `limit`, `mfit`) see [Image resize modes](image_resize_modes).

The following examples use two versions of the same image: `camera.jpg` (1280 x 853 pixels) and `camera-640.jpg` (640 x 427 pixels). Where resolution affects the behavior of the mode, the smaller version is used.
## fill

The `fill` cropping mode creates an image with the exact specified dimensions, without distorting the image. This option first scales up or down as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original image you want to keep if cropping occurs, using the [gravity][gravity-link] parameter (set to `center` by default).

**See full syntax**: [c_fill](transformation_reference#c_fill) in the _Transformation Reference_.
  
### Example 1: Fill a specific area with an image

Fill a 250-pixel square with the camera image:

![Image filled to a width and height of 250 pixels](https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/docs/camera.jpg)

```nodejs
cloudinary.image("docs/camera.jpg", {height: 250, width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

```python
CloudinaryImage("docs/camera.jpg").image(height=250, width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::fill()->width(250)
->height(250));
```

```java
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", height: 250, width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250).Width(250).Crop("fill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("fill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.fill() { width(250)
 height(250) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {height: 250, width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

![Video filled to a width and height of 250 pixels](https://res.cloudinary.com/demo/video/upload/c_fill,h_250,w_250/cld_rubiks_guy.mp4)

```nodejs
cloudinary.video("cld_rubiks_guy", {height: 250, width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

```python
CloudinaryVideo("cld_rubiks_guy").video(height=250, width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('cld_rubiks_guy.mp4'))
	->resize(Resize::fill()->width(250)
->height(250));
```

```java
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fill")).videoTag("cld_rubiks_guy");
```

```ruby
cl_video_tag("cld_rubiks_guy", height: 250, width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(250).Crop("fill")).BuildVideoTag("cld_rubiks_guy")
```

```dart
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fill")).generate("cld_rubiks_guy.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("fill")).resourceType("video").generate("cld_rubiks_guy.mp4");
```

```flutter
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```kotlin
cloudinary.video {
	publicId("cld_rubiks_guy.mp4")
	 resize(Resize.fill() { width(250)
 height(250) }) 
}.generate()
```

```jquery
$.cloudinary.video("cld_rubiks_guy", {height: 250, width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

### Example 2: Fill a specific area with a specific part of an image

Fill a 250-pixel square with the top-right part (gravity northeast) of the camera image:

![Image filled to a width and height of 250 pixels with northeast gravity](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_fill,g_north_east,w_250/docs/camera.jpg)

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="1.0", gravity="north_east", width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::fill()->width(250)
->aspectRatio(1.0)
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("north_east").Width(250).Crop("fill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("north_east").setWidth(250).setCrop("fill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.fill() { width(250)
 aspectRatio(1.0F)
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

![Video filled to a width and height of 250 pixels with northeast gravity](https://res.cloudinary.com/demo/video/upload/ar_1.0,c_fill,g_north_east,w_250/cld_rubiks_guy.mp4)

```nodejs
cloudinary.video("cld_rubiks_guy", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```python
CloudinaryVideo("cld_rubiks_guy").video(aspect_ratio="1.0", gravity="north_east", width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('cld_rubiks_guy.mp4'))
	->resize(Resize::fill()->width(250)
->aspectRatio(1.0)
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).videoTag("cld_rubiks_guy");
```

```ruby
cl_video_tag("cld_rubiks_guy", aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1.0").Gravity("north_east").Width(250).Crop("fill")).BuildVideoTag("cld_rubiks_guy")
```

```dart
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("north_east").setWidth(250).setCrop("fill")).generate("cld_rubiks_guy.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).resourceType("video").generate("cld_rubiks_guy.mp4");
```

```flutter
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```kotlin
cloudinary.video {
	publicId("cld_rubiks_guy.mp4")
	 resize(Resize.fill() { width(250)
 aspectRatio(1.0F)
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("cld_rubiks_guy", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```
## lfill (limit fill)

The `lfill` cropping mode behaves the same as the `fill` mode, but only if the original image is larger than the specified resolution limits, in which case the image is scaled down to fill the specified dimensions without distorting the image, and then the dimension that exceeds the request is cropped. If the original dimensions are smaller than the requested size, it's not resized at all. This prevents upscaling. You can specify which part of the original image you want to keep if cropping occurs using the [gravity](image_gravity) parameter (set to `center` by default).

**See full syntax**: [c_lfill](transformation_reference#c_lfill) in the _Transformation Reference_.

### Example 1: Scale down and fill an area defined by width and height

Fill a 150 x 200 pixel area with the `camera` image and limiting the size to no larger than the original image:

![Image lfilled to a width of 150 and a height of 200 pixels](https://res.cloudinary.com/demo/image/upload/c_lfill,h_200,w_150/docs/camera.jpg "width:150")

```nodejs
cloudinary.image("docs/camera.jpg", {height: 200, width: 150, crop: "lfill"})
```

```react
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().width(150).height(200)
);
```

```vue
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().width(150).height(200)
);
```

```angular
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().width(150).height(200)
);
```

```js
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().width(150).height(200)
);
```

```python
CloudinaryImage("docs/camera.jpg").image(height=200, width=150, crop="lfill")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::limitFill()->width(150)
->height(200));
```

```java
cloudinary.url().transformation(new Transformation().height(200).width(150).crop("lfill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", height: 200, width: 150, crop: "lfill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(150).Crop("lfill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitFill().width(150)
.height(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(150).setCrop("lfill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().height(200).width(150).crop("lfill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitFill().width(150)
.height(200)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.limitFill() { width(150)
 height(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {height: 200, width: 150, crop: "lfill"})
```

```react_native
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().width(150).height(200)
);
```

### Example 2: Scale down and fill an area defined by aspect ratio and height

Scale down the `camera` image to fill a 200-pixel square defined by aspect ratio and height:

![Image lfilled to a height of 200 pixels and aspect ratio 1.0](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_lfill,h_200/docs/camera.jpg "width:200")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", height: 200, crop: "lfill"})
```

```react
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().height(200).aspectRatio("1.0")
);
```

```vue
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().height(200).aspectRatio("1.0")
);
```

```angular
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().height(200).aspectRatio("1.0")
);
```

```js
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().height(200).aspectRatio("1.0")
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="1.0", height=200, crop="lfill")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::limitFill()->height(200)
->aspectRatio(1.0));
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").height(200).crop("lfill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "1.0", height: 200, crop: "lfill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Height(200).Crop("lfill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitFill().height(200)
.aspectRatio('1.0')));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setHeight(200).setCrop("lfill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").height(200).crop("lfill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitFill().height(200)
.aspectRatio('1.0')));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.limitFill() { height(200)
 aspectRatio(1.0F) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", height: 200, crop: "lfill"})
```

```react_native
import { limitFill } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera.jpg").resize(
  limitFill().height(200).aspectRatio("1.0")
);
```

## fill_pad

The `fill_pad` cropping mode tries to prevent a "bad crop" by first attempting to use the `fill` mode, but adds padding if it's determined that more of the original image needs to be included in the final image. It's especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio. It's only supported in conjunction with [Automatic gravity](image_automatic_gravity) (g_auto), and not supported for [animated images](animated_images).

**See full syntax**: [c_fill_pad](transformation_reference#c_fill_pad) in the _Transformation Reference_.

### Example: Compare standard fill mode with fill_pad mode

Compare the `camera` image delivered as an 80 x 400 image using the `fill` mode on the left, with the `fill_pad` mode on the right:
  

fill

fill_pad

![fill_pad](https://res.cloudinary.com/demo/image/upload/b_auto,c_fill_pad,g_auto,h_400,w_80/docs/camera.jpg "with_image: false, width:80")

```nodejs
cloudinary.image("docs/camera.jpg", {background: "auto", gravity: "auto", height: 400, width: 80, crop: "fill_pad"})
```

```react
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  fillPad()
    .width(80)
    .height(400)
    .gravity(autoGravity())
    .background(auto())
);
```

```vue
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  fillPad()
    .width(80)
    .height(400)
    .gravity(autoGravity())
    .background(auto())
);
```

```angular
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  fillPad()
    .width(80)
    .height(400)
    .gravity(autoGravity())
    .background(auto())
);
```

```js
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  fillPad()
    .width(80)
    .height(400)
    .gravity(autoGravity())
    .background(auto())
);
```

```python
CloudinaryImage("docs/camera.jpg").image(background="auto", gravity="auto", height=400, width=80, crop="fill_pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::fillPad()->width(80)
->height(400)
	->gravity(
	Gravity::autoGravity())
	->background(
	Background::auto())
	);
```

```java
cloudinary.url().transformation(new Transformation().background("auto").gravity("auto").height(400).width(80).crop("fill_pad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", background: "auto", gravity: "auto", height: 400, width: 80, crop: "fill_pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("auto").Gravity("auto").Height(400).Width(80).Crop("fill_pad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fillPad().width(80)
.height(400)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.auto())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("auto").setGravity("auto").setHeight(400).setWidth(80).setCrop("fill_pad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("auto").gravity("auto").height(400).width(80).crop("fill_pad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fillPad().width(80)
.height(400)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.auto())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.fillPad() { width(80)
 height(400)
	 gravity(
	Gravity.autoGravity())
	 background(
	Background.auto())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {background: "auto", gravity: "auto", height: 400, width: 80, crop: "fill_pad"})
```

```react_native
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  fillPad()
    .width(80)
    .height(400)
    .gravity(autoGravity())
    .background(auto())
);
```

## crop

The `crop` cropping mode extracts a region of the specified dimensions or a detected object from the original image. No scaling is applied, so if you specify dimensions, applying the `crop` mode to the same image of different resolutions can provide very different results. You can specify the [gravity](image_gravity) parameter to select which area or object to extract, or use [fixed coordinates cropping](#fixed_coordinates_cropping).

**See full syntax**: [c_crop](transformation_reference#c_crop) in the _Transformation Reference_.

> **NOTE**: The following examples use the `camera-640` image, which is a 640 pixel wide version of the camera image. If you replace the public ID with `camera` (1280 pixels wide), you'll see how the resulting image differs based on the resolution.

### Example 1: Crop an image to specified dimensions (width and height)

Crop the `camera-640` image to a width of 200 pixels and a height of 250 pixels, with northeast gravity:

![Image cropped to 200x250 with northeast gravity](https://res.cloudinary.com/demo/image/upload/c_crop,g_north_east,h_250,w_200/docs/camera-640.jpg)

```nodejs
cloudinary.image("docs/camera-640.jpg", {gravity: "north_east", height: 250, width: 200, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(compass("north_east"))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(compass("north_east"))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(compass("north_east"))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(compass("north_east"))
);
```

```python
CloudinaryImage("docs/camera-640.jpg").image(gravity="north_east", height=250, width=200, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::crop()->width(200)
->height(250)
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("north_east").height(250).width(200).crop("crop")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", gravity: "north_east", height: 250, width: 200, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("north_east").Height(250).Width(200).Crop("crop")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("north_east").setHeight(250).setWidth(200).setCrop("crop")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("north_east").height(250).width(200).crop("crop")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.crop() { width(200)
 height(250)
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {gravity: "north_east", height: 250, width: 200, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(compass("north_east"))
);
```

### Example 2: Crop an image to specified dimensions (aspect ratio and width)

Crop the `camera-640` image to a width of 450 pixels and an aspect ratio of 1.5:

![Image cropped to 450 width with aspect ratio of 1.5](https://res.cloudinary.com/demo/image/upload/ar_1.5,c_crop,w_450/docs/camera-640.jpg "width:450")

```nodejs
cloudinary.image("docs/camera-640.jpg", {aspect_ratio: "1.5", width: 450, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(450).aspectRatio(1.5)
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(450).aspectRatio(1.5)
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(450).aspectRatio(1.5)
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(450).aspectRatio(1.5)
);
```

```python
CloudinaryImage("docs/camera-640.jpg").image(aspect_ratio="1.5", width=450, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::crop()->width(450)
->aspectRatio(1.5));
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.5").width(450).crop("crop")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", aspect_ratio: "1.5", width: 450, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.5").Width(450).Crop("crop")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(450)
.aspectRatio(1.5)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.5").setWidth(450).setCrop("crop")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.5").width(450).crop("crop")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(450)
.aspectRatio(1.5)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.crop() { width(450)
 aspectRatio(1.5F) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {aspect_ratio: "1.5", width: 450, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(450).aspectRatio(1.5)
);
```

### Example 3: Crop an image to keep only the face

Crop the `camera-640` image without specifying dimensions, to keep only the face.

![Image cropped to a face](https://res.cloudinary.com/demo/image/upload/c_crop,g_face/docs/camera-640.jpg "width:140")

```nodejs
cloudinary.image("docs/camera-640.jpg", {gravity: "face", crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().gravity(focusOn(face()))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().gravity(focusOn(face()))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().gravity(focusOn(face()))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().gravity(focusOn(face()))
);
```

```python
CloudinaryImage("docs/camera-640.jpg").image(gravity="face", crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::crop()
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").crop("crop")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", gravity: "face", crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Crop("crop")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setCrop("crop")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").crop("crop")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop()
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.crop() {
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {gravity: "face", crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().gravity(focusOn(face()))
);
```

### Example 4: Crop an image to keep only the largest image in a composition

Use the `cld-decompose_tile` [special gravity position](image_gravity#special_positions) to crop an image composed of many images, such as this, keeping only the largest "tile":

![Image of several bird tiles](https://res.cloudinary.com/demo/image/upload/docs/tiled-birds.jpg "thumb: w_440, with_url: false, with_code: false, width:440")

![Crop to the largest tile](https://res.cloudinary.com/demo/image/upload/c_crop,g_cld-decompose_tile/docs/tiled-birds.jpg "thumb: w_275, width:275")

```nodejs
cloudinary.image("docs/tiled-birds.jpg", {gravity: "cld-decompose_tile", crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/tiled-birds.jpg").resize(
  crop().gravity(focusOn("cld-decompose_tile"))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/tiled-birds.jpg").resize(
  crop().gravity(focusOn("cld-decompose_tile"))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/tiled-birds.jpg").resize(
  crop().gravity(focusOn("cld-decompose_tile"))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/tiled-birds.jpg").resize(
  crop().gravity(focusOn("cld-decompose_tile"))
);
```

```python
CloudinaryImage("docs/tiled-birds.jpg").image(gravity="cld-decompose_tile", crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('docs/tiled-birds.jpg'))
	->resize(Resize::crop()
	->gravity(
	Gravity::focusOn("cld-decompose_tile"))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("cld-decompose_tile").crop("crop")).imageTag("docs/tiled-birds.jpg");
```

```ruby
cl_image_tag("docs/tiled-birds.jpg", gravity: "cld-decompose_tile", crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("cld-decompose_tile").Crop("crop")).BuildImageTag("docs/tiled-birds.jpg")
```

```dart
cloudinary.image('docs/tiled-birds.jpg').transformation(Transformation()
	.resize(Resize.crop()
	.gravity(
	Gravity.focusOn("cld-decompose_tile"))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("cld-decompose_tile").setCrop("crop")).generate("docs/tiled-birds.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("cld-decompose_tile").crop("crop")).generate("docs/tiled-birds.jpg");
```

```flutter
cloudinary.image('docs/tiled-birds.jpg').transformation(Transformation()
	.resize(Resize.crop()
	.gravity(
	Gravity.focusOn("cld-decompose_tile"))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/tiled-birds.jpg")
	 resize(Resize.crop() {
	 gravity(
	Gravity.focusOn("cld-decompose_tile"))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/tiled-birds.jpg", {gravity: "cld-decompose_tile", crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/tiled-birds.jpg").resize(
  crop().gravity(focusOn("cld-decompose_tile"))
);
```

### Fixed coordinates cropping

You can specify a region of the original image to crop by giving the exact coordinates of the area you want to keep. This is useful when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.

**To crop using fixed coordinates:**

1. Set the crop mode to `crop` (`c_crop` in URLs).
2. Specify the `x` coordinate for the left edge of the region to keep.
3. Specify the `y` coordinate for the top edge of the region to keep.
4. Specify the `width` of the region to keep.
5. Specify the `height` of the region to keep.

**Alternatively**, you can use percentage-based numbers instead of exact coordinates for `x`, `y`, `w` and `h` (e.g., 0.5 for 50%). When using percentages, all four parameters must be percentage-based.

For example, here's the full `camera-640` image (640 x 427 px). 

![Original camera image](https://res.cloudinary.com/demo/image/upload/docs/camera-640.jpg  "width:640")

```nodejs
cloudinary.image("docs/camera-640.jpg")
```

```react
new CloudinaryImage("docs/camera-640.jpg");
```

```vue
new CloudinaryImage("docs/camera-640.jpg");
```

```angular
new CloudinaryImage("docs/camera-640.jpg");
```

```js
new CloudinaryImage("docs/camera-640.jpg");
```

```python
CloudinaryImage("docs/camera-640.jpg").image()
```

```php
(new ImageTag('docs/camera-640.jpg'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg")
```

```react_native
new CloudinaryImage("docs/camera-640.jpg");
```

To resize the picture so that only the camera is visible, the image is cropped to a 300x170 region starting at the coordinate x = 170 and y = 40:

![300x170 image generated with fixed-coordinates cropping](https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_300,x_170,y_40/docs/camera-640.jpg "width:300")

```nodejs
cloudinary.image("docs/camera-640.jpg", {height: 200, width: 300, x: 170, y: 40, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(300).height(200).x(170).y(40)
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(300).height(200).x(170).y(40)
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(300).height(200).x(170).y(40)
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(300).height(200).x(170).y(40)
);
```

```python
CloudinaryImage("docs/camera-640.jpg").image(height=200, width=300, x=170, y=40, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::crop()->width(300)
->height(200)
->x(170)
->y(40));
```

```java
cloudinary.url().transformation(new Transformation().height(200).width(300).x(170).y(40).crop("crop")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", height: 200, width: 300, x: 170, y: 40, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(300).X(170).Y(40).Crop("crop")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.height(200)
.x(170)
.y(40)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(300).setX(170).setY(40).setCrop("crop")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().height(200).width(300).x(170).y(40).crop("crop")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.height(200)
.x(170)
.y(40)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.crop() { width(300)
 height(200)
 x(170)
 y(40) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {height: 200, width: 300, x: 170, y: 40, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg").resize(
  crop().width(300).height(200).x(170).y(40)
);
```

The image can be further resized with [chained transformations](image_transformations#chained_transformations). For example, the 300x170 cropped version above, also scaled down to half that size:

![fixed-coordinates cropped image also scaled down](https://res.cloudinary.com/demo/image/upload/c_crop,h_170,w_300,x_170,y_40/c_scale,w_0.5/docs/camera-640.jpg "width:150")

```nodejs
cloudinary.image("docs/camera-640.jpg", {transformation: [
  {height: 170, width: 300, x: 170, y: 40, crop: "crop"},
  {width: "0.5", crop: "scale"}
  ]})
```

```react
import { crop, scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg")
  .resize(crop().width(300).height(170).x(170).y(40))
  .resize(scale().width(0.5));
```

```vue
import { crop, scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg")
  .resize(crop().width(300).height(170).x(170).y(40))
  .resize(scale().width(0.5));
```

```angular
import { crop, scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg")
  .resize(crop().width(300).height(170).x(170).y(40))
  .resize(scale().width(0.5));
```

```js
import { crop, scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg")
  .resize(crop().width(300).height(170).x(170).y(40))
  .resize(scale().width(0.5));
```

```python
CloudinaryImage("docs/camera-640.jpg").image(transformation=[
  {'height': 170, 'width': 300, 'x': 170, 'y': 40, 'crop': "crop"},
  {'width': "0.5", 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera-640.jpg'))
	->resize(Resize::crop()->width(300)
->height(170)
->x(170)
->y(40))
	->resize(Resize::scale()->width(0.5));
```

```java
cloudinary.url().transformation(new Transformation()
  .height(170).width(300).x(170).y(40).crop("crop").chain()
  .width(0.5).crop("scale")).imageTag("docs/camera-640.jpg");
```

```ruby
cl_image_tag("docs/camera-640.jpg", transformation: [
  {height: 170, width: 300, x: 170, y: 40, crop: "crop"},
  {width: 0.5, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(170).Width(300).X(170).Y(40).Crop("crop").Chain()
  .Width(0.5).Crop("scale")).BuildImageTag("docs/camera-640.jpg")
```

```dart
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.height(170)
.x(170)
.y(40))
	.resize(Resize.scale().width(0.5)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(170).setWidth(300).setX(170).setY(40).setCrop("crop").chain()
  .setWidth(0.5).setCrop("scale")).generate("docs/camera-640.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(170).width(300).x(170).y(40).crop("crop").chain()
  .width(0.5).crop("scale")).generate("docs/camera-640.jpg");
```

```flutter
cloudinary.image('docs/camera-640.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.height(170)
.x(170)
.y(40))
	.resize(Resize.scale().width(0.5)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-640.jpg")
	 resize(Resize.crop() { width(300)
 height(170)
 x(170)
 y(40) })
	 resize(Resize.scale() { width(0.5F) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-640.jpg", {transformation: [
  {height: 170, width: 300, x: 170, y: 40, crop: "crop"},
  {width: "0.5", crop: "scale"}
  ]})
```

```react_native
import { crop, scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("docs/camera-640.jpg")
  .resize(crop().width(300).height(170).x(170).y(40))
  .resize(scale().width(0.5));
```

> **TIP**: If you're looking to crop images to focus on certain objects, try the [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon).

## thumb

The `thumb` cropping mode is specifically used for creating image thumbnails and must always be accompanied by the [gravity](image_gravity) parameter. This cropping mode generates a thumbnail of an image with the exact specified dimensions and with the original proportions retained, but the resulting image might be scaled to fit in the specified dimensions. You can specify the [zoom](face_detection_based_transformations#zoom_level) parameter to determine how much to scale the resulting image within the specified dimensions.

**See full syntax**: [c_thumb](transformation_reference#c_thumb) in the _Transformation Reference_.

### Example 1: Crop to a thumbnail of a face

Create a 150 x 150 thumbnail with face detection, of the `camera` image. Below you can see the original image as well as the face detection based thumbnail:

![Original photo for face detection](https://res.cloudinary.com/demo/image/upload/docs/camera.jpg "with_code: false, thumb: w_300, width:300")

![150x150 thumbnail with face detection](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/docs/camera.jpg "width:150")

```nodejs
cloudinary.image("docs/camera.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
```

```react
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .width(150)
    .height(150)
    .gravity(focusOn(face()))
);
```

```vue
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .width(150)
    .height(150)
    .gravity(focusOn(face()))
);
```

```angular
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .width(150)
    .height(150)
    .gravity(focusOn(face()))
);
```

```js
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .width(150)
    .height(150)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(gravity="face", height=150, width=150, crop="thumb")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::thumbnail()->width(150)
->height(150)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", gravity: "face", height: 150, width: 150, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(150).Width(150).Crop("thumb")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(150)
.height(150)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(150).setWidth(150).setCrop("thumb")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(150).width(150).crop("thumb")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(150)
.height(150)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.thumbnail() { width(150)
 height(150)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {gravity: "face", height: 150, width: 150, crop: "thumb"})
```

```react_native
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .width(150)
    .height(150)
    .gravity(focusOn(face()))
);
```

### Example 2: Crop to a thumbnail of a face using aspect ratio and zoom

Create a 150-pixel high thumbnail with aspect ratio 5:6 and face detection of the `camera` image, zoomed out by 75%.

![150-pixel high thumbnail with face detection zoomed out](https://res.cloudinary.com/demo/image/upload/ar_5:6,c_thumb,g_face,h_150,z_0.75/docs/camera.jpg "width:125")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "5:6", gravity: "face", height: 150, zoom: "0.75", crop: "thumb"})
```

```react
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .height(150)
    .aspectRatio("5:6")
    .zoom(0.75)
    .gravity(focusOn(face()))
);
```

```vue
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .height(150)
    .aspectRatio("5:6")
    .zoom(0.75)
    .gravity(focusOn(face()))
);
```

```angular
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .height(150)
    .aspectRatio("5:6")
    .zoom(0.75)
    .gravity(focusOn(face()))
);
```

```js
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .height(150)
    .aspectRatio("5:6")
    .zoom(0.75)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="5:6", gravity="face", height=150, zoom="0.75", crop="thumb")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::thumbnail()->height(150)
->aspectRatio("5:6")
->zoom(0.75)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("5:6").gravity("face").height(150).zoom(0.75).crop("thumb")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "5:6", gravity: "face", height: 150, zoom: 0.75, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("5:6").Gravity("face").Height(150).Zoom(0.75).Crop("thumb")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().height(150)
.aspectRatio("5:6")
.zoom(0.75)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("5:6").setGravity("face").setHeight(150).setZoom(0.75).setCrop("thumb")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("5:6").gravity("face").height(150).zoom(0.75).crop("thumb")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().height(150)
.aspectRatio("5:6")
.zoom(0.75)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.thumbnail() { height(150)
 aspectRatio("5:6")
 zoom(0.75F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "5:6", gravity: "face", height: 150, zoom: "0.75", crop: "thumb"})
```

```react_native
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/camera.jpg").resize(
  thumbnail()
    .height(150)
    .aspectRatio("5:6")
    .zoom(0.75)
    .gravity(focusOn(face()))
);
```

## auto
The `auto` cropping mode automatically determines the best crop based on the gravity and specified dimensions. It's less aggressive than [thumb](#thumb) and provides more focus than [fill](#fill). If the requested dimensions are smaller than the best crop, the result is downscaled. If the requested dimensions are larger than the original image, the result is upscaled. Use this mode in conjunction with the [gravity](image_gravity) parameter, in particular [automatic gravity](image_automatic_gravity) and with [object aware cropping](cloudinary_ai_content_analysis_object_aware_cropping).

**See full syntax**: [c_auto](transformation_reference#c_auto) in the _Transformation Reference_.

**Try it out**: [Content-aware cropping](https://console.cloudinary.com/app/image/home/smart-crop?media=image&collection=image&sample=me%2Fsmart-crop-1.jpg&variant=left).

### Example 1: Automatically crop to the most interesting part of the image (width and height)

Create a 300 x 350 crop of an image, automatically deciding which parts of the image to keep.

![Man holding a camera](https://res.cloudinary.com/demo/image/upload/c_auto,g_auto,h_350,w_300/docs/camera.jpg "width:300")

```nodejs
cloudinary.image("docs/camera.jpg", {gravity: "auto", height: 350, width: 300, crop: "auto"})
```

```react
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(300)
    .height(350)
    .gravity(autoGravity())
);
```

```vue
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(300)
    .height(350)
    .gravity(autoGravity())
);
```

```angular
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(300)
    .height(350)
    .gravity(autoGravity())
);
```

```js
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(300)
    .height(350)
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("docs/camera.jpg").image(gravity="auto", height=350, width=300, crop="auto")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::auto()->width(300)
->height(350)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(350).width(300).crop("auto")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", gravity: "auto", height: 350, width: 300, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto").Height(350).Width(300).Crop("auto")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
.height(350)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto").setHeight(350).setWidth(300).setCrop("auto")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(350).width(300).crop("auto")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
.height(350)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.auto() { width(300)
 height(350)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {gravity: "auto", height: 350, width: 300, crop: "auto"})
```

```react_native
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(300)
    .height(350)
    .gravity(autoGravity())
);
```

### Example 2: Automatically crop to the camera (width and aspect ratio)

Create a 16:9 aspect ratio crop of an image, keeping focus on the camera (requires the [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_object_aware_cropping)).

![Man holding a camera](https://res.cloudinary.com/demo/image/upload/ar_16:9,c_auto,g_auto:camera,w_450/docs/camera.jpg "width:450")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "16:9", gravity: "auto:camera", width: 450, crop: "auto"})
```

```react
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(450)
    .aspectRatio(ar16X9())
    .gravity(autoGravity().autoFocus(focusOn("camera")))
);
```

```vue
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(450)
    .aspectRatio(ar16X9())
    .gravity(autoGravity().autoFocus(focusOn("camera")))
);
```

```angular
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(450)
    .aspectRatio(ar16X9())
    .gravity(autoGravity().autoFocus(focusOn("camera")))
);
```

```js
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(450)
    .aspectRatio(ar16X9())
    .gravity(autoGravity().autoFocus(focusOn("camera")))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="16:9", gravity="auto:camera", width=450, crop="auto")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\AspectRatio;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\AutoFocus;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::auto()->width(450)
	->aspectRatio(
	AspectRatio::ar16X9())
	->gravity(
	Gravity::autoGravity()
	->autoFocus(
	AutoFocus::focusOn("camera"))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("16:9").gravity("auto:camera").width(450).crop("auto")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "16:9", gravity: "auto:camera", width: 450, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("16:9").Gravity("auto:camera").Width(450).Crop("auto")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.auto().width(450)
	.aspectRatio(
	AspectRatio.ar16X9())
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn("camera"))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("16:9").setGravity("auto:camera").setWidth(450).setCrop("auto")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("16:9").gravity("auto:camera").width(450).crop("auto")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.auto().width(450)
	.aspectRatio(
	AspectRatio.ar16X9())
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn("camera"))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.auto() { width(450)
	 aspectRatio(
	AspectRatio.ar16X9())
	 gravity(
	Gravity.autoGravity() {
	 autoFocus(
	AutoFocus.focusOn("camera"))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "16:9", gravity: "auto:camera", width: 450, crop: "auto"})
```

```react_native
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar16X9 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/camera.jpg").resize(
  auto()
    .width(450)
    .aspectRatio(ar16X9())
    .gravity(autoGravity().autoFocus(focusOn("camera")))
);
```

**See also**: [Automatic gravity with the auto cropping mode](image_automatic_gravity#automatic_gravity_with_the_auto_cropping_mode)

## auto_pad

The `auto_pad` cropping mode tries to prevent a "bad crop" by first attempting to use the `auto` mode, but adds padding if it's determined that more of the original image needs to be included in the final image. It's especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio. It's only supported in conjunction with [Automatic gravity](image_automatic_gravity) (g_auto), and not supported for [animated images](animated_images).

**See full syntax**: [c_auto_pad](transformation_reference#c_auto_pad) in the _Transformation Reference_.

### Example 1: Compare standard auto cropping mode with auto_pad mode

Compare the following image delivered as a 110 x 300 image using the `auto` mode on the left, with the `auto_pad` mode on the right:
  

auto

auto_pad  

![auto_pad](https://res.cloudinary.com/demo/image/upload/b_auto,c_auto_pad,g_auto,h_300,w_110/docs/camera.jpg "with_image: false, width:110")

```nodejs
cloudinary.image("docs/camera.jpg", {background: "auto", gravity: "auto", height: 300, width: 110, crop: "auto_pad"})
```

```react
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(auto())
);
```

```vue
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(auto())
);
```

```angular
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(auto())
);
```

```js
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(auto())
);
```

```python
CloudinaryImage("docs/camera.jpg").image(background="auto", gravity="auto", height=300, width=110, crop="auto_pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::autoPad()->width(110)
->height(300)
	->gravity(
	Gravity::autoGravity())
	->background(
	Background::auto())
	);
```

```java
cloudinary.url().transformation(new Transformation().background("auto").gravity("auto").height(300).width(110).crop("auto_pad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", background: "auto", gravity: "auto", height: 300, width: 110, crop: "auto_pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("auto").Gravity("auto").Height(300).Width(110).Crop("auto_pad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.autoPad().width(110)
.height(300)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.auto())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("auto").setGravity("auto").setHeight(300).setWidth(110).setCrop("auto_pad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("auto").gravity("auto").height(300).width(110).crop("auto_pad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.autoPad().width(110)
.height(300)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.auto())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.autoPad() { width(110)
 height(300)
	 gravity(
	Gravity.autoGravity())
	 background(
	Background.auto())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {background: "auto", gravity: "auto", height: 300, width: 110, crop: "auto_pad"})
```

```react_native
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { auto } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(auto())
);
```

### Example 2: Use auto_pad mode with auto_fill background

Rather than use a solid color to pad the background, use generative fill:

![Image padded with generative fill](https://res.cloudinary.com/demo/image/upload/b_gen_fill,c_auto_pad,g_auto,h_300,w_110/docs/camera.jpg "width:110")

```nodejs
cloudinary.image("docs/camera.jpg", {background: "gen_fill", gravity: "auto", height: 300, width: 110, crop: "auto_pad"})
```

```react
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(generativeFill())
);
```

```vue
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(generativeFill())
);
```

```angular
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(generativeFill())
);
```

```js
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/camera.jpg").image(background="gen_fill", gravity="auto", height=300, width=110, crop="auto_pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::autoPad()->width(110)
->height(300)
	->gravity(
	Gravity::autoGravity())
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().background("gen_fill").gravity("auto").height(300).width(110).crop("auto_pad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", background: "gen_fill", gravity: "auto", height: 300, width: 110, crop: "auto_pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("gen_fill").Gravity("auto").Height(300).Width(110).Crop("auto_pad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.autoPad().width(110)
.height(300)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("gen_fill").setGravity("auto").setHeight(300).setWidth(110).setCrop("auto_pad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("gen_fill").gravity("auto").height(300).width(110).crop("auto_pad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.autoPad().width(110)
.height(300)
	.gravity(
	Gravity.autoGravity())
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.autoPad() { width(110)
 height(300)
	 gravity(
	Gravity.autoGravity())
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {background: "gen_fill", gravity: "auto", height: 300, width: 110, crop: "auto_pad"})
```

```react_native
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  autoPad()
    .width(110)
    .height(300)
    .gravity(autoGravity())
    .background(generativeFill())
);
```

> **READING**:
>
> * [Image resize modes](image_resize_modes): Detailed examples of `scale`, `fit`, `limit`, and `mfit`.

> * [Image padding modes](image_padding_modes): Detailed examples of `pad`, `lpad`, and `mpad`.

> * [Resizing and cropping interactive demo](resizing_and_cropping#resizing_and_cropping_interactive_demo): Try out all crop and resize modes interactively.

[gravity-link]:image_gravity