> ## 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 gravity for crops


[resize-and-crop-modes-link]:resizing_and_cropping#resize_and_crop_modes
[fill-mode-link]:image_crop_modes#fill

The `gravity` parameter (`g` in URLs) controls which part of an image to keep when cropping. By default, Cloudinary keeps the center of the image. You can specify compass positions, face detection, object detection, or let AI automatically determine the best focal point.

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

## Compass positions

The basic gravity value is specified by giving a compass direction to include: `north_east`, `north`, `north_west`, `west`, `south_west`, `south`, `south_east`, `east`, or `center` (the default value). The compass direction represents a location in the image, for example, `north_east` represents the top right corner.
  
For example, [fill][fill-mode-link] a 250-pixel square with the sample image while retaining the aspect ratio:

* Original image: ![Original image](https://res.cloudinary.com/demo/image/upload/docs/livingroom3.jpg "thumb: w_500, width:500")

```nodejs
cloudinary.image("docs/livingroom3.jpg")
```

```react
new CloudinaryImage("docs/livingroom3.jpg");
```

```vue
new CloudinaryImage("docs/livingroom3.jpg");
```

```angular
new CloudinaryImage("docs/livingroom3.jpg");
```

```js
new CloudinaryImage("docs/livingroom3.jpg");
```

```python
CloudinaryImage("docs/livingroom3.jpg").image()
```

```php
(new ImageTag('docs/livingroom3.jpg'));
```

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

```ruby
cl_image_tag("docs/livingroom3.jpg")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("docs/livingroom3.jpg")
```

```dart
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation());
```

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

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

```flutter
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("docs/livingroom3.jpg") 
}.generate()
```

```jquery
$.cloudinary.image("docs/livingroom3.jpg")
```

```react_native
new CloudinaryImage("docs/livingroom3.jpg");
``` ![Original video](https://res.cloudinary.com/demo/video/upload/guy_woman_mobile.mp4 "thumb: w_500, width:500")

```nodejs
cloudinary.video("guy_woman_mobile")
```

```react
new CloudinaryVideo("guy_woman_mobile.mp4");
```

```vue
new CloudinaryVideo("guy_woman_mobile.mp4");
```

```angular
new CloudinaryVideo("guy_woman_mobile.mp4");
```

```js
new CloudinaryVideo("guy_woman_mobile.mp4");
```

```python
CloudinaryVideo("guy_woman_mobile").video()
```

```php
(new VideoTag('guy_woman_mobile.mp4'));
```

```java
cloudinary.url().transformation(new Transformation().videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile")
```

```csharp
cloudinary.Api.UrlVideoUp.BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation());
```

```swift
cloudinary.createUrl().setResourceType("video").generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation());
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4") 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile")
```

```react_native
new CloudinaryVideo("guy_woman_mobile.mp4");
```
* With gravity set to east: ![Image filled to a width and height of 250 pixels with east gravity](https://res.cloudinary.com/demo/image/upload/c_fill,g_east,h_250,w_250/docs/livingroom3.jpg "width:250")

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

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

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

(new ImageTag('docs/livingroom3.jpg'))
	->resize(Resize::fill()->width(250)
->height(250)
	->gravity(
	Gravity::compass(
	Compass::east()))
	);
```

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

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

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

```dart
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.east()))
	));
```

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

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

```flutter
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.east()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/livingroom3.jpg")
	 resize(Resize.fill() { width(250)
 height(250)
	 gravity(
	Gravity.compass(
	Compass.east()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/livingroom3.jpg", {gravity: "east", height: 250, 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/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
``` ![Video filled to a width and height of 250 pixels with east gravity](https://res.cloudinary.com/demo/video/upload/c_fill,g_east,h_250,w_250/guy_woman_mobile.mp4 "width:250")

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

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(gravity="east", height=250, width=250, crop="fill")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::fill()->width(250)
->height(250)
	->gravity(
	Gravity::compass(
	Compass::east()))
	);
```

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

```ruby
cl_video_tag("guy_woman_mobile", gravity: "east", height: 250, width: 250, crop: "fill")
```

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

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.east()))
	));
```

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

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

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.east()))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.fill() { width(250)
 height(250)
	 gravity(
	Gravity.compass(
	Compass.east()))
	 }) 
}.generate()
```

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

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("east"))
);
```
* With gravity set to west: ![Image filled to a width and height of 250 pixels with west gravity](https://res.cloudinary.com/demo/image/upload/c_fill,g_west,h_250,w_250/docs/livingroom3.jpg "width:250")

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

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryImage("docs/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

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

(new ImageTag('docs/livingroom3.jpg'))
	->resize(Resize::fill()->width(250)
->height(250)
	->gravity(
	Gravity::compass(
	Compass::west()))
	);
```

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

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

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

```dart
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.west()))
	));
```

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

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

```flutter
cloudinary.image('docs/livingroom3.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.west()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/livingroom3.jpg")
	 resize(Resize.fill() { width(250)
 height(250)
	 gravity(
	Gravity.compass(
	Compass.west()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/livingroom3.jpg", {gravity: "west", height: 250, 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/livingroom3.jpg").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
``` ![Video filled to a width and height of 250 pixels with west gravity](https://res.cloudinary.com/demo/video/upload/c_fill,g_west,h_250,w_250/guy_woman_mobile.mp4 "width:250")

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

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(gravity="west", height=250, width=250, crop="fill")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::fill()->width(250)
->height(250)
	->gravity(
	Gravity::compass(
	Compass::west()))
	);
```

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

```ruby
cl_video_tag("guy_woman_mobile", gravity: "west", height: 250, width: 250, crop: "fill")
```

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

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.west()))
	));
```

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

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

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)
	.gravity(
	Gravity.compass(
	Compass.west()))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.fill() { width(250)
 height(250)
	 gravity(
	Gravity.compass(
	Compass.west()))
	 }) 
}.generate()
```

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

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

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("west"))
);
```
## Special positions

There are a number of special positions available to use as the focal point for image cropping, for example `g_face` to automatically detect the largest face in an image and make it the focus of the crop, and `g_custom` to use [custom coordinates](custom_focus_areas#custom_coordinates) that were previously specified (e.g., as part of the image [upload method](image_upload_api_reference#upload)) and make them the focus of the transformation.

Here's an example of focusing on the largest face using `g_face`:

![Focus on the largest face](https://res.cloudinary.com/demo/image/upload/ar_1:1,w_300,c_auto,g_face/docs/street-women.jpg "with_image: false, width:300")

```nodejs
cloudinary.image("docs/street-women.jpg", {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "auto"})
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(focusOn(face()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(focusOn(face()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(focusOn(face()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("docs/street-women.jpg").image(aspect_ratio="1:1", width=300, gravity="face", crop="auto")
```

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

(new ImageTag('docs/street-women.jpg'))
	->resize(Resize::auto()->width(300)
	->aspectRatio(
	AspectRatio::ar1X1())
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1:1").width(300).gravity("face").crop("auto")).imageTag("docs/street-women.jpg");
```

```ruby
cl_image_tag("docs/street-women.jpg", aspect_ratio: "1:1", width: 300, gravity: "face", crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1:1").Width(300).Gravity("face").Crop("auto")).BuildImageTag("docs/street-women.jpg")
```

```dart
cloudinary.image('docs/street-women.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1:1").setWidth(300).setGravity("face").setCrop("auto")).generate("docs/street-women.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1:1").width(300).gravity("face").crop("auto")).generate("docs/street-women.jpg");
```

```flutter
cloudinary.image('docs/street-women.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/street-women.jpg")
	 resize(Resize.auto() { width(300)
	 aspectRatio(
	AspectRatio.ar1X1())
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/street-women.jpg", {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "auto"})
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(focusOn(face()))
);
```

Original

ar_1:1,w_300,c_auto,g_faceFocus on the largest face

Or, keep all the faces in the crop with `g_faces`:

![Keep all the faces](https://res.cloudinary.com/demo/image/upload/ar_1.75,w_300,c_auto,g_faces/docs/street-women.jpg "width:300")

```nodejs
cloudinary.image("docs/street-women.jpg", {aspect_ratio: "1.75", width: 300, gravity: "faces", crop: "auto"})
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(1.75)
    .gravity(focusOn(faces()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(1.75)
    .gravity(focusOn(faces()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(1.75)
    .gravity(focusOn(faces()))
);
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(1.75)
    .gravity(focusOn(faces()))
);
```

```python
CloudinaryImage("docs/street-women.jpg").image(aspect_ratio="1.75", width=300, gravity="faces", crop="auto")
```

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

(new ImageTag('docs/street-women.jpg'))
	->resize(Resize::auto()->width(300)
->aspectRatio(1.75)
	->gravity(
	Gravity::focusOn(
	FocusOn::faces()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.75").width(300).gravity("faces").crop("auto")).imageTag("docs/street-women.jpg");
```

```ruby
cl_image_tag("docs/street-women.jpg", aspect_ratio: "1.75", width: 300, gravity: "faces", crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.75").Width(300).Gravity("faces").Crop("auto")).BuildImageTag("docs/street-women.jpg")
```

```dart
cloudinary.image('docs/street-women.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
.aspectRatio(1.75)
	.gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.75").setWidth(300).setGravity("faces").setCrop("auto")).generate("docs/street-women.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.75").width(300).gravity("faces").crop("auto")).generate("docs/street-women.jpg");
```

```flutter
cloudinary.image('docs/street-women.jpg').transformation(Transformation()
	.resize(Resize.auto().width(300)
.aspectRatio(1.75)
	.gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/street-women.jpg")
	 resize(Resize.auto() { width(300)
 aspectRatio(1.75F)
	 gravity(
	Gravity.focusOn(
	FocusOn.faces()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/street-women.jpg", {aspect_ratio: "1.75", width: 300, gravity: "faces", crop: "auto"})
```

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

new CloudinaryImage("docs/street-women.jpg").resize(
  auto()
    .width(300)
    .aspectRatio(1.75)
    .gravity(focusOn(faces()))
);
```

Some of the special positions require add-ons, such as the [Advanced Facial Attributes Detection](advanced_facial_attributes_detection_addon) add-on to focus on the eyes in this case:

![Crop to the eyes](https://res.cloudinary.com/demo/image/upload/c_auto,g_adv_eyes,h_70,w_210/face_left.jpg "with_image: false")

```nodejs
cloudinary.image("face_left.jpg", {gravity: "adv_eyes", height: 70, width: 210, crop: "auto"})
```

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

new CloudinaryImage("face_left.jpg").resize(
  auto()
    .width(210)
    .height(70)
    .gravity(focusOn(advancedEyes()))
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  auto()
    .width(210)
    .height(70)
    .gravity(focusOn(advancedEyes()))
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  auto()
    .width(210)
    .height(70)
    .gravity(focusOn(advancedEyes()))
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  auto()
    .width(210)
    .height(70)
    .gravity(focusOn(advancedEyes()))
);
```

```python
CloudinaryImage("face_left.jpg").image(gravity="adv_eyes", height=70, width=210, crop="auto")
```

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

(new ImageTag('face_left.jpg'))
	->resize(Resize::auto()->width(210)
->height(70)
	->gravity(
	Gravity::focusOn(
	FocusOn::advancedEyes()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("adv_eyes").height(70).width(210).crop("auto")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", gravity: "adv_eyes", height: 70, width: 210, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("adv_eyes").Height(70).Width(210).Crop("auto")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.auto().width(210)
.height(70)
	.gravity(
	Gravity.focusOn(
	FocusOn.advancedEyes()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("adv_eyes").setHeight(70).setWidth(210).setCrop("auto")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("adv_eyes").height(70).width(210).crop("auto")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.auto().width(210)
.height(70)
	.gravity(
	Gravity.focusOn(
	FocusOn.advancedEyes()))
	));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.auto() { width(210)
 height(70)
	 gravity(
	Gravity.focusOn(
	FocusOn.advancedEyes()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {gravity: "adv_eyes", height: 70, width: 210, crop: "auto"})
```

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

new CloudinaryImage("face_left.jpg").resize(
  auto()
    .width(210)
    .height(70)
    .gravity(focusOn(advancedEyes()))
);
```

Original

c_auto,g_adv_eyes,h_70,w_210Focus on the eyes

For a full listing of the available gravity positions, see [special positions](transformation_reference#g_special_position) in the _Transformation URL API Reference_.

## Object positions
Using the [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon), you can specify specific objects to focus on when cropping images. There are thousands of different supported objects that you can choose to focus on (see [Supported objects and categories](cloudinary_ai_content_analysis_addon#supported_objects_and_categories)). 
For example, crop this image to focus on the hat:

![Focus on the hat](https://res.cloudinary.com/demo/image/upload/ar_1:1,c_auto,g_hat,w_400/docs/clothing.jpg "with_image: false")

```nodejs
cloudinary.image("docs/clothing.jpg", {aspect_ratio: "1:1", gravity: "hat", width: 400, crop: "auto"})
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(focusOn("hat"))
);
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(focusOn("hat"))
);
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(focusOn("hat"))
);
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(focusOn("hat"))
);
```

```python
CloudinaryImage("docs/clothing.jpg").image(aspect_ratio="1:1", gravity="hat", width=400, crop="auto")
```

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

(new ImageTag('docs/clothing.jpg'))
	->resize(Resize::auto()->width(400)
	->aspectRatio(
	AspectRatio::ar1X1())
	->gravity(
	Gravity::focusOn("hat"))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1:1").gravity("hat").width(400).crop("auto")).imageTag("docs/clothing.jpg");
```

```ruby
cl_image_tag("docs/clothing.jpg", aspect_ratio: "1:1", gravity: "hat", width: 400, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1:1").Gravity("hat").Width(400).Crop("auto")).BuildImageTag("docs/clothing.jpg")
```

```dart
cloudinary.image('docs/clothing.jpg').transformation(Transformation()
	.resize(Resize.auto().width(400)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.focusOn("hat"))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1:1").setGravity("hat").setWidth(400).setCrop("auto")).generate("docs/clothing.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1:1").gravity("hat").width(400).crop("auto")).generate("docs/clothing.jpg");
```

```flutter
cloudinary.image('docs/clothing.jpg').transformation(Transformation()
	.resize(Resize.auto().width(400)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.focusOn("hat"))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/clothing.jpg")
	 resize(Resize.auto() { width(400)
	 aspectRatio(
	AspectRatio.ar1X1())
	 gravity(
	Gravity.focusOn("hat"))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/clothing.jpg", {aspect_ratio: "1:1", gravity: "hat", width: 400, crop: "auto"})
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(focusOn("hat"))
);
```

Original

ar_1:1,c_auto,g_hat,w_400Focus on the hat

In this case, we've used the [auto](image_crop_modes#c_auto) cropping mode, but you can also use object gravity with the [crop](image_crop_modes#crop), [thumb](image_crop_modes#thumb), [fill](image_crop_modes#fill), and [lfill](image_crop_modes#lfill_limit_fill) cropping modes.

## Liquid rescaling

Content-aware liquid rescaling (also sometimes known as 'seam carving') can be useful when changing the aspect ratio of an image. Normal scaling retains all image content even when aspect ratios change, so important elements of an image can be distorted. Liquid rescaling intelligently removes or duplicates 'seams' of pixels that may zig zag horizontally or vertically through the picture. The seams are determined using an algorithm that selects pixels with the least importance (least color change on either side of the seam). The result is an image where the most 'important' elements of the image are retained and generally do not appear distorted although the relative height or width of items in an image may change, especially if you significantly change the aspect ratio.

**To use liquid rescaling:**

1. Set the crop mode to `scale` (`c_scale` in URLs).
2. Set the gravity to `liquid` (`g_liquid` in URLs).
3. Specify your desired dimensions (width and/or height).

**Tips for best results:**

* Liquid gravity works best when applied to scenic images with large 'unbusy' sections such as sky, grass, or water.
* It works best when applied to larger images. Use this gravity to change aspect ratio using relative widths and heights, where one of the two dimensions remains at or close to `1.0`.
* If you also want to resize the image, apply the resize on a different component of a chained transformation.
* In some cases, over-aggressive liquid rescaling can result in significant artifacts.

For example, using liquid scaling to change an image to a square (aspect ratio of 1:1) based on the original image width, and then resize the result to 500x500:

![Scale with liquid gravity](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_scale,g_liquid,w_1.0/c_scale,h_500,w_500/country_sunset.jpg "thumb: w_150, width:150")

```nodejs
cloudinary.image("country_sunset.jpg", {transformation: [
  {aspect_ratio: "1.0", gravity: "liquid", width: "1.0", crop: "scale"},
  {height: 500, width: 500, crop: "scale"}
  ]})
```

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

new CloudinaryImage("country_sunset.jpg")
  .resize(scale().width("1.0").aspectRatio("1.0").liquidRescaling())
  .resize(scale().width(500).height(500));
```

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

new CloudinaryImage("country_sunset.jpg")
  .resize(scale().width("1.0").aspectRatio("1.0").liquidRescaling())
  .resize(scale().width(500).height(500));
```

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

new CloudinaryImage("country_sunset.jpg")
  .resize(scale().width("1.0").aspectRatio("1.0").liquidRescaling())
  .resize(scale().width(500).height(500));
```

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

new CloudinaryImage("country_sunset.jpg")
  .resize(scale().width("1.0").aspectRatio("1.0").liquidRescaling())
  .resize(scale().width(500).height(500));
```

```python
CloudinaryImage("country_sunset.jpg").image(transformation=[
  {'aspect_ratio': "1.0", 'gravity': "liquid", 'width': "1.0", 'crop': "scale"},
  {'height': 500, 'width': 500, 'crop': "scale"}
  ])
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('country_sunset.jpg'))
	->resize(Resize::scale()->width(1.0)
->aspectRatio(1.0)
->liquidRescaling())
	->resize(Resize::scale()->width(500)
->height(500));
```

```java
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("liquid").width(1.0).crop("scale").chain()
  .height(500).width(500).crop("scale")).imageTag("country_sunset.jpg");
```

```ruby
cl_image_tag("country_sunset.jpg", transformation: [
  {aspect_ratio: "1.0", gravity: "liquid", width: 1.0, crop: "scale"},
  {height: 500, width: 500, crop: "scale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1.0").Gravity("liquid").Width(1.0).Crop("scale").Chain()
  .Height(500).Width(500).Crop("scale")).BuildImageTag("country_sunset.jpg")
```

```dart
cloudinary.image('country_sunset.jpg').transformation(Transformation()
	.resize(Resize.scale().width('1.0')
.aspectRatio('1.0')
.liquidRescaling())
	.resize(Resize.scale().width(500)
.height(500)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("1.0").setGravity("liquid").setWidth(1.0).setCrop("scale").chain()
  .setHeight(500).setWidth(500).setCrop("scale")).generate("country_sunset.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("liquid").width(1.0).crop("scale").chain()
  .height(500).width(500).crop("scale")).generate("country_sunset.jpg");
```

```flutter
cloudinary.image('country_sunset.jpg').transformation(Transformation()
	.resize(Resize.scale().width('1.0')
.aspectRatio('1.0')
.liquidRescaling())
	.resize(Resize.scale().width(500)
.height(500)));
```

```kotlin
cloudinary.image {
	publicId("country_sunset.jpg")
	 resize(Resize.scale() { width(1.0F)
 aspectRatio(1.0F)
 liquidRescaling() })
	 resize(Resize.scale() { width(500)
 height(500) }) 
}.generate()
```

```jquery
$.cloudinary.image("country_sunset.jpg", {transformation: [
  {aspect_ratio: "1.0", gravity: "liquid", width: "1.0", crop: "scale"},
  {height: 500, width: 500, crop: "scale"}
  ]})
```

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

new CloudinaryImage("country_sunset.jpg")
  .resize(scale().width("1.0").aspectRatio("1.0").liquidRescaling())
  .resize(scale().width(500).height(500));
```

> **READING**:
>
> * [Image automatic gravity](image_automatic_gravity): AI-powered gravity for intelligent cropping based on content.

> * [Image crop modes](image_crop_modes): Detailed examples of `fill`, `lfill`, `fill_pad`, `crop`, `thumb`, `auto`, and `auto_pad`.

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

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