> ## 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 padding modes


The padding modes resize an image to fit within a bounding box and fill any remaining space with padding. This page covers `pad`, `lpad`, and `mpad`. For crop modes (`fill`, `crop`, `thumb`, `auto`, and others), see [Image crop modes](image_crop_modes). For resize-only modes (`scale`, `fit`, `limit`, `mfit`), see [Image resize modes](image_resize_modes).

## pad

The `pad` resize mode resizes the image to fill the specified dimensions while retaining the original aspect ratio and with all of the original image visible. If the proportions of the original image do not match the specified dimensions, padding is added to the image to reach the required size. You can also specify where the original image is placed by using the [gravity][gravity-link] parameter (set to `center` by default), and specify the color of the [background](effects_and_artistic_enhancements#setting_background_color) in the case that padding is added.

If you're looking to apply padding to all sides of an image, consider using the [limit pad](#lpad_limit_pad) resize mode. 

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

### Example 1: Resize and pad an image to fill the square defined by width and height

Resize and pad the camera image with a brown background to a width and height of 250 pixels:

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

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

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

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

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::pad()->width(250)
->height(250)
	->background(
	Background::color(Color::BROWN))
	);
```

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

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

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

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.pad().width(250)
.height(250)
	.background(
	Background.color(Color.BROWN))
	));
```

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

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

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.pad().width(250)
.height(250)
	.background(
	Background.color(Color.BROWN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.pad() { width(250)
 height(250)
	 background(
	Background.color(Color.BROWN))
	 }) 
}.generate()
```

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

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

![Video padded to a width and height of 250 pixels](https://res.cloudinary.com/demo/video/upload/b_brown,c_pad,h_250,w_250/guy_woman_mobile.mp4 "width:250")

```nodejs
cloudinary.video("guy_woman_mobile", {background: "brown", height: 250, width: 250, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(background="brown", height=250, width=250, crop="pad")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::pad()->width(250)
->height(250)
	->background(
	Background::color(Color::BROWN))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("brown").height(250).width(250).crop("pad")).videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile", background: "brown", height: 250, width: 250, crop: "pad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("brown").Height(250).Width(250).Crop("pad")).BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.pad().width(250)
.height(250)
	.background(
	Background.color(Color.BROWN))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("brown").setHeight(250).setWidth(250).setCrop("pad")).generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().background("brown").height(250).width(250).crop("pad")).resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.pad().width(250)
.height(250)
	.background(
	Background.color(Color.BROWN))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.pad() { width(250)
 height(250)
	 background(
	Background.color(Color.BROWN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile", {background: "brown", height: 250, width: 250, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("brown"))
);
```

### Example 2: Resize and pad an image to fill the rectangle defined by aspect ratio

Resize and pad the camera image with a brown background to a rectangle of height of 150 pixels, and aspect ratio 2:1:

![Image padded to a height of 150 pixels and aspect ratio 2:1](https://res.cloudinary.com/demo/image/upload/ar_2:1,b_brown,c_pad,h_150/docs/camera.jpg "width:300")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="2:1", background="brown", height=150, crop="pad")
```

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::pad()->height(150)
->aspectRatio("2:1")
	->background(
	Background::color(Color::BROWN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("2:1").background("brown").height(150).crop("pad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("2:1").Background("brown").Height(150).Crop("pad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.pad().height(150)
.aspectRatio("2:1")
	.background(
	Background.color(Color.BROWN))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("2:1").setBackground("brown").setHeight(150).setCrop("pad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("2:1").background("brown").height(150).crop("pad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.pad().height(150)
.aspectRatio("2:1")
	.background(
	Background.color(Color.BROWN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.pad() { height(150)
 aspectRatio("2:1")
	 background(
	Background.color(Color.BROWN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

![Video padded to a height of 150 pixels and aspect ratio 2:1](https://res.cloudinary.com/demo/video/upload/ar_2:1,b_brown,c_pad,h_150/guy_woman_mobile.mp4 "width:300")

```nodejs
cloudinary.video("guy_woman_mobile", {aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(aspect_ratio="2:1", background="brown", height=150, crop="pad")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::pad()->height(150)
->aspectRatio("2:1")
	->background(
	Background::color(Color::BROWN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("2:1").background("brown").height(150).crop("pad")).videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile", aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("2:1").Background("brown").Height(150).Crop("pad")).BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.pad().height(150)
.aspectRatio("2:1")
	.background(
	Background.color(Color.BROWN))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("2:1").setBackground("brown").setHeight(150).setCrop("pad")).generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("2:1").background("brown").height(150).crop("pad")).resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.pad().height(150)
.aspectRatio("2:1")
	.background(
	Background.color(Color.BROWN))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.pad() { height(150)
 aspectRatio("2:1")
	 background(
	Background.color(Color.BROWN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile", {aspect_ratio: "2:1", background: "brown", height: 150, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  pad()
    .height(150)
    .aspectRatio("2:1")
    .background(color("brown"))
);
```## lpad (limit pad)

The `lpad` resize mode behaves the same as the `pad` mode but only if the original image is larger than the specified limit (width and height), in which case the image is scaled down to fill the specified dimensions while retaining the original aspect ratio and with all of the original image visible. This mode doesn't scale up the image if your requested dimensions are bigger than the original image's. If the proportions of the original image do not match the specified dimensions, padding is added to the image to reach the required size. You can also specify where the original image is placed by using the [gravity][gravity-link] parameter (set to `center` by default), and specify the color of the [background][background-color-link] in the case that padding is added.

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

### Example 1: Scale down and pad an image

Limit the sample image to a bounding box of 400 x 150 pixels, and pad with a green background:

![Image lpadded to a width of 400 and height of 150 pixels](https://res.cloudinary.com/demo/image/upload/b_green,c_lpad,h_150,w_400/docs/camera.jpg "width: 400")

```nodejs
cloudinary.image("docs/camera.jpg", {background: "green", height: 150, width: 400, crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(background="green", height=150, width=400, crop="lpad")
```

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::limitPad()->width(400)
->height(150)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("green").height(150).width(400).crop("lpad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", background: "green", height: 150, width: 400, crop: "lpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("green").Height(150).Width(400).Crop("lpad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(400)
.height(150)
	.background(
	Background.color(Color.GREEN))
	));
```

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

```android
MediaManager.get().url().transformation(new Transformation().background("green").height(150).width(400).crop("lpad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(400)
.height(150)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.limitPad() { width(400)
 height(150)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {background: "green", height: 150, width: 400, crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

![Video lpadded to a width of 400 and height of 150 pixels](https://res.cloudinary.com/demo/video/upload/b_green,c_lpad,h_150,w_400/guy_woman_mobile.mp4 "width: 400")

```nodejs
cloudinary.video("guy_woman_mobile", {background: "green", height: 150, width: 400, crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(background="green", height=150, width=400, crop="lpad")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::limitPad()->width(400)
->height(150)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("green").height(150).width(400).crop("lpad")).videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile", background: "green", height: 150, width: 400, crop: "lpad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("green").Height(150).Width(400).Crop("lpad")).BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(400)
.height(150)
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("green").setHeight(150).setWidth(400).setCrop("lpad")).generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().background("green").height(150).width(400).crop("lpad")).resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(400)
.height(150)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.limitPad() { width(400)
 height(150)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile", {background: "green", height: 150, width: 400, crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(400)
    .height(150)
    .background(color("green"))
);
```

### Example 2: Scale down and pad an image using aspect ratio

Limit the sample image to a bounding box specified by an aspect ratio of 0.66 with a width of 100 pixels, and pad with a green background:

![Image lpadded to a width of 100 pixels and aspect ratio of 0.66](https://res.cloudinary.com/demo/image/upload/ar_0.66,b_green,c_lpad,w_100/docs/camera.jpg "width: 100")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="0.66", background="green", width=100, crop="lpad")
```

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::limitPad()->width(100)
->aspectRatio(0.66)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("0.66").background("green").width(100).crop("lpad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("0.66").Background("green").Width(100).Crop("lpad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("0.66").setBackground("green").setWidth(100).setCrop("lpad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("0.66").background("green").width(100).crop("lpad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.limitPad() { width(100)
 aspectRatio(0.66F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

![Video lpadded to a width of 100 pixels and aspect ratio of 0.66](https://res.cloudinary.com/demo/video/upload/ar_0.66,b_green,c_lpad,w_100/guy_woman_mobile.mp4 "width: 100")

```nodejs
cloudinary.video("guy_woman_mobile", {aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(aspect_ratio="0.66", background="green", width=100, crop="lpad")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::limitPad()->width(100)
->aspectRatio(0.66)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("0.66").background("green").width(100).crop("lpad")).videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile", aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("0.66").Background("green").Width(100).Crop("lpad")).BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("0.66").setBackground("green").setWidth(100).setCrop("lpad")).generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("0.66").background("green").width(100).crop("lpad")).resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.limitPad() { width(100)
 aspectRatio(0.66F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile", {aspect_ratio: "0.66", background: "green", width: 100, crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(100)
    .aspectRatio(0.66)
    .background(color("green"))
);
```

### Example 3: Pad an image on all sides

Apply padding to all sides of the sample image by specifying a bounding box that's square, and has a width of 1.1 times the original width:

![Image padded on both sides](https://res.cloudinary.com/demo/image/upload/ar_1.0,b_green,c_lpad,w_1.1/docs/camera.jpg "thumb:c_scale,w_300, width:300")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", background: "green", width: "1.1", crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="1.0", background="green", width="1.1", crop="lpad")
```

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::limitPad()->width(1.1)
->aspectRatio(1.0)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").background("green").width(1.1).crop("lpad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "1.0", background: "green", width: 1.1, crop: "lpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Background("green").Width(1.1).Crop("lpad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(1.1)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setBackground("green").setWidth(1.1).setCrop("lpad")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").background("green").width(1.1).crop("lpad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.limitPad().width(1.1)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.limitPad() { width(1.1F)
 aspectRatio(1.0F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", background: "green", width: "1.1", crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

![Video padded on both sides](https://res.cloudinary.com/demo/video/upload/ar_1.0,b_green,c_lpad,w_1.1/guy_woman_mobile.mp4 "thumb:c_scale,w_300, width:300")

```nodejs
cloudinary.video("guy_woman_mobile", {aspect_ratio: "1.0", background: "green", width: "1.1", crop: "lpad"})
```

```react
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```vue
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```angular
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```js
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```python
CloudinaryVideo("guy_woman_mobile").video(aspect_ratio="1.0", background="green", width="1.1", crop="lpad")
```

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

(new VideoTag('guy_woman_mobile.mp4'))
	->resize(Resize::limitPad()->width(1.1)
->aspectRatio(1.0)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").background("green").width(1.1).crop("lpad")).videoTag("guy_woman_mobile");
```

```ruby
cl_video_tag("guy_woman_mobile", aspect_ratio: "1.0", background: "green", width: 1.1, crop: "lpad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1.0").Background("green").Width(1.1).Crop("lpad")).BuildVideoTag("guy_woman_mobile")
```

```dart
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(1.1)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1.0").setBackground("green").setWidth(1.1).setCrop("lpad")).generate("guy_woman_mobile.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").background("green").width(1.1).crop("lpad")).resourceType("video").generate("guy_woman_mobile.mp4");
```

```flutter
cloudinary.video('guy_woman_mobile.mp4').transformation(Transformation()
	.resize(Resize.limitPad().width(1.1)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.video {
	publicId("guy_woman_mobile.mp4")
	 resize(Resize.limitPad() { width(1.1F)
 aspectRatio(1.0F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("guy_woman_mobile", {aspect_ratio: "1.0", background: "green", width: "1.1", crop: "lpad"})
```

```react_native
import { limitPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("guy_woman_mobile.mp4").resize(
  limitPad()
    .width(1.1)
    .aspectRatio("1.0")
    .background(color("green"))
);
```
## mpad (minimum pad)

The `mpad` resize mode applies padding to fill the whole area specified by the dimensions if those dimensions are larger than the original image's dimensions. This mode doesn't scale down the image if the requested dimensions are smaller than the original image's. In that case, the original image is delivered. You can also specify where the original image is placed by using the [gravity](image_gravity) parameter (set to `center` by default), and specify the color of the [background](effects_and_artistic_enhancements#setting_background_color) in the case that padding is added.

You can use the `mpad` resize mode as a way of applying padding to all sides of an image, like a border, or frame.

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

### Example 1: Pad an image to the specified width and height

Minimum pad the 100-pixel wide image `camera-100` to a width and height of 200 pixels while retaining the aspect ratio:

![Image mpadded to a width and height of 200 pixels](https://res.cloudinary.com/demo/image/upload/b_green,c_mpad,h_200,w_200/docs/camera-100.jpg "width:200")

```nodejs
cloudinary.image("docs/camera-100.jpg", {background: "green", height: 200, width: 200, crop: "mpad"})
```

```react
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(200)
    .height(200)
    .background(color("green"))
);
```

```vue
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(200)
    .height(200)
    .background(color("green"))
);
```

```angular
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(200)
    .height(200)
    .background(color("green"))
);
```

```js
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(200)
    .height(200)
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera-100.jpg").image(background="green", height=200, width=200, crop="mpad")
```

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

(new ImageTag('docs/camera-100.jpg'))
	->resize(Resize::minimumPad()->width(200)
->height(200)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("green").height(200).width(200).crop("mpad")).imageTag("docs/camera-100.jpg");
```

```ruby
cl_image_tag("docs/camera-100.jpg", background: "green", height: 200, width: 200, crop: "mpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("green").Height(200).Width(200).Crop("mpad")).BuildImageTag("docs/camera-100.jpg")
```

```dart
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(200)
.height(200)
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("green").setHeight(200).setWidth(200).setCrop("mpad")).generate("docs/camera-100.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("green").height(200).width(200).crop("mpad")).generate("docs/camera-100.jpg");
```

```flutter
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(200)
.height(200)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-100.jpg")
	 resize(Resize.minimumPad() { width(200)
 height(200)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-100.jpg", {background: "green", height: 200, width: 200, crop: "mpad"})
```

```react_native
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(200)
    .height(200)
    .background(color("green"))
);
```

### Example 2: Ensure an image fits a minimum bounding box using padding

Minimum pad the `camera` image to a square of 200 pixels, defined by aspect ratio and width. This results in the original image being delivered, as it's larger than the dimensions specified for the padding:

![Image left unchanged](https://res.cloudinary.com/demo/image/upload/ar_1.0,b_green,c_mpad,w_200/docs/camera.jpg "thumb: w_700, width:700")

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", background: "green", width: 200, crop: "mpad"})
```

```react
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  minimumPad()
    .width(200)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```vue
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  minimumPad()
    .width(200)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```angular
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  minimumPad()
    .width(200)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```js
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  minimumPad()
    .width(200)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="1.0", background="green", width=200, crop="mpad")
```

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

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::minimumPad()->width(200)
->aspectRatio(1.0)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").background("green").width(200).crop("mpad")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "1.0", background: "green", width: 200, crop: "mpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Background("green").Width(200).Crop("mpad")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(200)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

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

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").background("green").width(200).crop("mpad")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(200)
.aspectRatio('1.0')
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.minimumPad() { width(200)
 aspectRatio(1.0F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", background: "green", width: 200, crop: "mpad"})
```

```react_native
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera.jpg").resize(
  minimumPad()
    .width(200)
    .aspectRatio("1.0")
    .background(color("green"))
);
```

### Example 3: Pad non-centered image to the specified width and height

Minimum pad the 100-pixel wide image `camera-100` to a 175 x 125 pixel rectangle, positioned offset from the top-left:

![Image mpadded to a width and height of 200 pixels with gravity west](https://res.cloudinary.com/demo/image/upload/b_pink,c_mpad,g_north_west,h_125,w_175,x_20,y_20/docs/camera-100.jpg "width:175")

```nodejs
cloudinary.image("docs/camera-100.jpg", {background: "pink", gravity: "north_west", height: 125, width: 175, x: 20, y: 20, crop: "mpad"})
```

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

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(175)
    .height(125)
    .gravity(compass("north_west"))
    .offsetX(20)
    .offsetY(20)
    .background(color("pink"))
);
```

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

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(175)
    .height(125)
    .gravity(compass("north_west"))
    .offsetX(20)
    .offsetY(20)
    .background(color("pink"))
);
```

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

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(175)
    .height(125)
    .gravity(compass("north_west"))
    .offsetX(20)
    .offsetY(20)
    .background(color("pink"))
);
```

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

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(175)
    .height(125)
    .gravity(compass("north_west"))
    .offsetX(20)
    .offsetY(20)
    .background(color("pink"))
);
```

```python
CloudinaryImage("docs/camera-100.jpg").image(background="pink", gravity="north_west", height=125, width=175, x=20, y=20, crop="mpad")
```

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

(new ImageTag('docs/camera-100.jpg'))
	->resize(Resize::minimumPad()->width(175)
->height(125)
	->gravity(
	Gravity::compass(
	Compass::northWest()))
->offsetX(20)
->offsetY(20)
	->background(
	Background::color(Color::PINK))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("pink").gravity("north_west").height(125).width(175).x(20).y(20).crop("mpad")).imageTag("docs/camera-100.jpg");
```

```ruby
cl_image_tag("docs/camera-100.jpg", background: "pink", gravity: "north_west", height: 125, width: 175, x: 20, y: 20, crop: "mpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("pink").Gravity("north_west").Height(125).Width(175).X(20).Y(20).Crop("mpad")).BuildImageTag("docs/camera-100.jpg")
```

```dart
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(175)
.height(125)
	.gravity(
	Gravity.compass(
	Compass.northWest()))
.offsetX(20)
.offsetY(20)
	.background(
	Background.color(Color.PINK))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("pink").setGravity("north_west").setHeight(125).setWidth(175).setX(20).setY(20).setCrop("mpad")).generate("docs/camera-100.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("pink").gravity("north_west").height(125).width(175).x(20).y(20).crop("mpad")).generate("docs/camera-100.jpg");
```

```flutter
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(175)
.height(125)
	.gravity(
	Gravity.compass(
	Compass.northWest()))
.offsetX(20)
.offsetY(20)
	.background(
	Background.color(Color.PINK))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-100.jpg")
	 resize(Resize.minimumPad() { width(175)
 height(125)
	 gravity(
	Gravity.compass(
	Compass.northWest()))
 offsetX(20)
 offsetY(20)
	 background(
	Background.color(Color.PINK))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-100.jpg", {background: "pink", gravity: "north_west", height: 125, width: 175, x: 20, y: 20, crop: "mpad"})
```

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

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(175)
    .height(125)
    .gravity(compass("north_west"))
    .offsetX(20)
    .offsetY(20)
    .background(color("pink"))
);
```

### Example 4: Apply a border to an image

Use relative numbers for height and width to specify a border around the image:

![Image mpadded to a width and height relative to the size of the image](https://res.cloudinary.com/demo/image/upload/b_green,c_mpad,h_1.3,w_1.3/docs/camera-100.jpg "width:130")

```nodejs
cloudinary.image("docs/camera-100.jpg", {background: "green", height: "1.3", width: "1.3", crop: "mpad"})
```

```react
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(1.3)
    .height(1.3)
    .background(color("green"))
);
```

```vue
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(1.3)
    .height(1.3)
    .background(color("green"))
);
```

```angular
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(1.3)
    .height(1.3)
    .background(color("green"))
);
```

```js
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(1.3)
    .height(1.3)
    .background(color("green"))
);
```

```python
CloudinaryImage("docs/camera-100.jpg").image(background="green", height="1.3", width="1.3", crop="mpad")
```

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

(new ImageTag('docs/camera-100.jpg'))
	->resize(Resize::minimumPad()->width(1.3)
->height(1.3)
	->background(
	Background::color(Color::GREEN))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("green").height(1.3).width(1.3).crop("mpad")).imageTag("docs/camera-100.jpg");
```

```ruby
cl_image_tag("docs/camera-100.jpg", background: "green", height: 1.3, width: 1.3, crop: "mpad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background("green").Height(1.3).Width(1.3).Crop("mpad")).BuildImageTag("docs/camera-100.jpg")
```

```dart
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(1.3)
.height(1.3)
	.background(
	Background.color(Color.GREEN))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground("green").setHeight(1.3).setWidth(1.3).setCrop("mpad")).generate("docs/camera-100.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().background("green").height(1.3).width(1.3).crop("mpad")).generate("docs/camera-100.jpg");
```

```flutter
cloudinary.image('docs/camera-100.jpg').transformation(Transformation()
	.resize(Resize.minimumPad().width(1.3)
.height(1.3)
	.background(
	Background.color(Color.GREEN))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera-100.jpg")
	 resize(Resize.minimumPad() { width(1.3F)
 height(1.3F)
	 background(
	Background.color(Color.GREEN))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera-100.jpg", {background: "green", height: "1.3", width: "1.3", crop: "mpad"})
```

```react_native
import { minimumPad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/camera-100.jpg").resize(
  minimumPad()
    .width(1.3)
    .height(1.3)
    .background(color("green"))
);
```

> **READING**:
>
> * [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.

[gravity-link]:image_gravity
[background-color-link]:effects_and_artistic_enhancements#setting_background_color