Responsive design and art direction generally requires displaying images at a variety of sizes, often much smaller than the original.
If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large files. Therefore, images should always be delivered from the server at their final size.
When you use any of the Cloudinary resizing transformations , the sizing (scaling/cropping) is performed on the server side, and the asset is always delivered to the browser at the requested size.
Here are some examples of different cropping techniques used on the same image. Click each image to see the URL parameters applied in each case:
Original image
Focus on the model in a portrait crop
Detect the face for a thumbnail crop
Automatically determine what to keep in a banner crop
To help you learn about the different cropping and resizing modes, try out the
interactive demo .
You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.
Using an integer value for w (width) or h (height) sets the new dimension to that number in pixels. For example, w_150
sets the width to exactly 150 pixels.
Using a decimal value for width or height sets the new dimension relative to the original dimension. For example, w_0.5
sets the width to half the original width.
Using ih
or iw
as values sets the dimension to the initial height or initial width of the original image respectively. For example, w_iw
sets the width to the same value as the original width of the image. This may be useful when applying chained transformations or setting the dimensions of an overlay .
Aspect ratios are specified using the ar (aspect ratio) parameter, as follows:
a:b
where a
signifies the relative width and b
the relative height (e.g., ar_4:3
or ar_16:9
).
a decimal value representing the ratio of the width divided by the height (e.g., ar_1.33
or ar_2.5
). 1.0 is a perfect square.
In most cases, you will specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these 3 resize qualifiers, and Cloudinary will automatically determine the missing dimension as follows:
If you provide only width or only height , then the other dimension is automatically calculated to deliver the original aspect ratio. For example, if your original asset is 400*600, then specifying c_crop,w_200
is the same as specifying c_crop,w_200,h_300
. Supported for all resize and crop modes.
If you provide only the aspect ratio : If ar
> 1, the original width is maintained and the height is cropped to deliver the requested ratio. If ar
< 1, the original height is maintained, and the width is cropped accordingly. Supported for cropping modes only. Not supported for imagga_crop
.
If you want to resize only one dimension, and keep the other dimension at its original size (rather than the automatic determination described above), you can specify only width or only height, and add the
fl_ignore_aspect_ratio flag qualifier.
When changing the dimensions of an uploaded image by setting the image's height, width, and/or aspect ratio, you need to decide how to resize or crop the image to fit into the requested size. Use the c (crop/resize) parameter for selecting the crop/resize mode. Cloudinary supports the following image resize/crop modes:
Crop/resize mode
Behavior
Cropping modes
If the requested dimensions have a different aspect ratio than the original, these modes crop out part of the image.
fill
Resizes the image to fill the specified dimensions without distortion. The image may be cropped as a result.
lfill
Same as fill
, but only scales down the image.
fill_pad
Same as fill
, but avoids excessive cropping by adding padding when needed. Supported only with automatic cropping .
crop
Extracts a region of the specified dimensions from the original image without first resizing it.
thumb
Creates a thumbnail of the image with the specified dimensions, based on a specified gravity . Scaling may occur.
Resize modes
These modes adjust the size of the delivered image without cropping out any elements of the original image.
scale
Resizes the image to the specified dimensions without necessarily retaining the original aspect ratio.
fit
Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio.
limit
Same as fit
, but only scales down the image.
mfit
Same as fit
, but only scales up the image.
pad
Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio, and applies padding if the resized image does not fill the whole area.
lpad
Same as pad
, but only scales down the image.
mpad
Same as pad
, but only scales up the image.
Add-on resize and crop modes
These modes adjust the size and/or crop the image using an add-on.
imagga_scale
Performs smart scaling, using the Imagga Crop and Scale add-on.
imagga_crop
Performs smart cropping, using the Imagga Crop and Scale add-on.
When creating dynamic delivery URLs, if you specify only the width and/or height parameters, but no cropping mode (no
c_<mode>
), the image is
scaled to the new dimensions by default. However, there is no default cropping mode when using the Cloudinary SDK helper methods (see
Embedding images in web pages using SDKs ), so a cropping mode must be explicitly set.
Some of the cropping modes keep only a certain part of the original image in the resulting image. By default, the center of the image is kept in the crop, but this is not always ideal. To keep the parts of the image that are important to you, you can use the gravity parameter. For example, you can specify to keep faces, text, or certain objects in the crop, or gravitate towards an automatically-determined area of interest. You can also guide the crop towards areas of your image defined by compass points, for example, north
to keep the top part of the image, or south_east
to keep the bottom-right part. Additionally, if you know the coordinates of the area you want to keep, you can explicitly specify these.
The following examples show the same image resized to a width and height of 200 pixels, using different methods of resizing and cropping.
The original image is 640 x 426 pixels:
Resizing the image to 200 x 200 pixels, using crop , scale , fill and pad results in the following images:
c_crop,h_200,w_200
c_scale,h_200,w_200
c_fill,h_200,w_200
b_black,c_pad,h_200,w_200
You could deliver the c_crop
transformation shown above as follows:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>200 , :width =>200 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::crop()->width(200 )
->height(200 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>200 , " width " =>200 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=200 , width=200 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 200 , width : 200 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(200 ).width(200 ).crop(" crop " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(crop().width(200 ).height(200 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 200 , width : 200 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 200 , width : 200 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(crop().width(200 ).height(200 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 200 " width =" 200 " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(crop().width(200 ).height(200 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 200 " width =" 200 " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(crop().width(200 ).height(200 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 200 " width=" 200 " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200 ).Width(200 ).Crop(" crop " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200 ).setWidth(200 ).setCrop(" crop " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(200 ).width(200 ).crop(" crop " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.crop() { width(200 )
height(200 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(200)
.height(200)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(200)
.height(200)));
The following sections explain how each of the crop modes behave.
The fill
cropping mode creates an image with the exact specified dimensions, without distorting the image. This option first scales up or down as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original image you want to keep if cropping occurs, using the gravity parameter (set to center
by default).
Fill a 250-pixel square with the models image:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>250 , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::fill()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>250 , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=250 , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" fill " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fill().width(250 ).height(250 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 250 , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fill().width(250 ).height(250 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 250 " width =" 250 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fill().width(250 ).height(250 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 250 " width =" 250 " crop =" fill " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fill().width(250 ).height(250 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 250 " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" fill " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" fill " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" fill " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.fill() { width(250 )
height(250 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fill().width(250)
.height(250)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fill().width(250)
.height(250)));
Fill a 250-pixel square with the top-left part (gravity northwest) of the models image:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 1.0 " , :gravity =>" north_west " , :width =>250 , :crop =>" fill " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::fill()->width(250 )
->aspectRatio(1.0 )
->gravity(
Gravity ::compass(
Compass ::northWest()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 1.0 " , " gravity " =>" north_west " , " width " =>250 , " crop " =>" fill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 1.0 " , gravity=" north_west " , width=250 , crop=" fill " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" north_west " ).width(250 ).crop(" fill " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , gravity : " north_west " , width : 250 , crop : " fill " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 1.0 " gravity =" north_west " width =" 250 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 1.0 " gravity =" north_west " width =" 250 " crop =" fill " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fill()
.width(250 )
.aspectRatio(" 1.0 " )
.gravity(compass(" north_west " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 1.0 " gravity=" north_west " width=" 250 " crop=" fill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Gravity(" north_west " ).Width(250 ).Crop(" fill " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setGravity(" north_west " ).setWidth(250 ).setCrop(" fill " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).gravity(" north_west " ).width(250 ).crop(" fill " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.fill() { width(250 )
aspectRatio(1.0F )
gravity(
Gravity.compass(
Compass.northWest()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fill().width(250)
.aspectRatio('1.0')
.gravity(
Gravity.compass(
Compass.northWest()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fill().width(250)
.aspectRatio('1.0')
.gravity(
Gravity.compass(
Compass.northWest()))
));
The lfill
cropping mode behaves the same as the fill
mode, but only if the original image is larger than the specified resolution limits, in which case the image is scaled down to fill the specified dimensions without distorting the image, and then the dimension that exceeds the request is cropped. If the original dimensions are smaller than the requested size, it is not resized at all. This prevents upscaling. You can specify which part of the original image you want to keep if cropping occurs using the gravity parameter (set to center
by default).
Fill a 150 x 200 pixel area with the models
image and limiting the size to no larger than the original image:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>200 , :width =>150 , :crop =>" lfill " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::limitFill()->width(150 )
->height(200 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>200 , " width " =>150 , " crop " =>" lfill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=200 , width=150 , crop=" lfill " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 200 , width : 150 , crop : " lfill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(200 ).width(150 ).crop(" lfill " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().width(150 ).height(200 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 200 , width : 150 , crop : " lfill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 200 , width : 150 , crop : " lfill " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().width(150 ).height(200 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 200 " width =" 150 " crop =" lfill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().width(150 ).height(200 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 200 " width =" 150 " crop =" lfill " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().width(150 ).height(200 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 200 " width=" 150 " crop=" lfill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200 ).Width(150 ).Crop(" lfill " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200 ).setWidth(150 ).setCrop(" lfill " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(200 ).width(150 ).crop(" lfill " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.limitFill() { width(150 )
height(200 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFill().width(150)
.height(200)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFill().width(150)
.height(200)));
Scale down the models
image to fill a 200-pixel square defined by aspect ratio and height:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 1.0 " , :height =>200 , :crop =>" lfill " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::limitFill()->height(200 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 1.0 " , " height " =>200 , " crop " =>" lfill " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 1.0 " , height=200 , crop=" lfill " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 200 , crop : " lfill " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(200 ).crop(" lfill " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().height(200 ).aspectRatio(" 1.0 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 1.0 " , height : 200 , crop : " lfill " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 200 , crop : " lfill " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().height(200 ).aspectRatio(" 1.0 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 1.0 " height =" 200 " crop =" lfill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().height(200 ).aspectRatio(" 1.0 " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 1.0 " height =" 200 " crop =" lfill " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFill().height(200 ).aspectRatio(" 1.0 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 1.0 " height=" 200 " crop=" lfill " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(200 ).Crop(" lfill " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(200 ).setCrop(" lfill " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(200 ).crop(" lfill " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.limitFill() { height(200 )
aspectRatio(1.0F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFill().height(200)
.aspectRatio('1.0')));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFill().height(200)
.aspectRatio('1.0')));
The fill_pad
cropping mode tries to prevent a "bad crop" by first attempting to use the fill
mode, but adds padding if it is determined that more of the original image needs to be included in the final image. This is especially useful if the aspect ratio of the delivered image is considerably different from the original's aspect ratio. It is only supported in conjunction with Automatic cropping (g_auto), and not supported for animated images .
Compare the lady
image delivered as an 80 x 400 image using the fill
mode on the left, with the fill_pad
mode on the right:
fill
fill_pad
Ruby (cloudinary 1.x):
cl_image_tag(" lady.jpg " , :background =>" auto " , :gravity =>" auto " , :height =>400 , :width =>80 , :crop =>" fill_pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' lady.jpg ' ))
->resize(Resize ::fillPad()->width(80 )
->height(400 )
->gravity(
Gravity ::autoGravity())
->background(
Background ::auto())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" lady.jpg " , array (" background " =>" auto " , " gravity " =>" auto " , " height " =>400 , " width " =>80 , " crop " =>" fill_pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" lady.jpg " ).image(background=" auto " , gravity=" auto " , height=400 , width=80 , crop=" fill_pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" lady.jpg " , {background : " auto " , gravity : " auto " , height : 400 , width : 80 , crop : " fill_pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" auto " ).gravity(" auto " ).height(400 ).width(80 ).crop(" fill_pad " )).imageTag(" lady.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" lady.jpg " ).resize(
fillPad()
.width(80 )
.height(400 )
.gravity(autoGravity())
.background(auto())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' lady.jpg ' , {background : " auto " , gravity : " auto " , height : 400 , width : 80 , crop : " fill_pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" lady.jpg " , {background : " auto " , gravity : " auto " , height : 400 , width : 80 , crop : " fill_pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" lady.jpg " ).resize(
fillPad()
.width(80 )
.height(400 )
.gravity(autoGravity())
.background(auto())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" lady.jpg " >
<Transformation background =" auto " gravity =" auto " height =" 400 " width =" 80 " crop =" fill_pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" lady.jpg " ).resize(
fillPad()
.width(80 )
.height(400 )
.gravity(autoGravity())
.background(auto())
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" lady.jpg " >
<cld-transformation background =" auto " gravity =" auto " height =" 400 " width =" 80 " crop =" fill_pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" lady.jpg " ).resize(
fillPad()
.width(80 )
.height(400 )
.gravity(autoGravity())
.background(auto())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" lady.jpg " >
<cl-transformation background=" auto " gravity=" auto " height=" 400 " width=" 80 " crop=" fill_pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" auto " ).Gravity(" auto " ).Height(400 ).Width(80 ).Crop(" fill_pad " )).BuildImageTag(" lady.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" auto " ).setGravity(" auto " ).setHeight(400 ).setWidth(80 ).setCrop(" fill_pad " )).generate(" lady.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" auto " ).gravity(" auto " ).height(400 ).width(80 ).crop(" fill_pad " )).generate(" lady.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" lady.jpg " )
resize(Resize.fillPad() { width(80 )
height(400 )
gravity(
Gravity.autoGravity())
background(
Background.auto())
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('lady.jpg').transformation(Transformation()
.resize(Resize.fillPad().width(80)
.height(400)
.gravity(
Gravity.autoGravity())
.background(
Background.auto())
));
Dart (cloudinary_dart 0.x):
cloudinary.image('lady.jpg').transformation(Transformation()
.resize(Resize.fillPad().width(80)
.height(400)
.gravity(
Gravity.autoGravity())
.background(
Background.auto())
));
The crop
cropping mode extracts a region of the specified dimensions or a detected object from the original image. No scaling is applied, so if you specify dimensions, applying the crop
mode to the same image of different resolutions can provide very different results. You can specify the gravity parameter to select which area or object to extract, or use fixed coordinates cropping .
Crop the models
image to a width of 200 pixels and a height of 150 pixels, with northwest gravity:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :gravity =>" north_west " , :height =>150 , :width =>200 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::crop()->width(200 )
->height(150 )
->gravity(
Gravity ::compass(
Compass ::northWest()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" gravity " =>" north_west " , " height " =>150 , " width " =>200 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(gravity=" north_west " , height=150 , width=200 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {gravity : " north_west " , height : 150 , width : 200 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" north_west " ).height(150 ).width(200 ).crop(" crop " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north_west " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {gravity : " north_west " , height : 150 , width : 200 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {gravity : " north_west " , height : 150 , width : 200 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north_west " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation gravity =" north_west " height =" 150 " width =" 200 " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north_west " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation gravity =" north_west " height =" 150 " width =" 200 " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop()
.width(200 )
.height(150 )
.gravity(compass(" north_west " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation gravity=" north_west " height=" 150 " width=" 200 " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" north_west " ).Height(150 ).Width(200 ).Crop(" crop " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(" north_west " ).setHeight(150 ).setWidth(200 ).setCrop(" crop " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" north_west " ).height(150 ).width(200 ).crop(" crop " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.crop() { width(200 )
height(150 )
gravity(
Gravity.compass(
Compass.northWest()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(200)
.height(150)
.gravity(
Gravity.compass(
Compass.northWest()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(200)
.height(150)
.gravity(
Gravity.compass(
Compass.northWest()))
));
Crop the models
image to a width of 450 pixels and an aspect ratio of 2.5:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 2.5 " , :width =>450 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::crop()->width(450 )
->aspectRatio(2.5 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 2.5 " , " width " =>450 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 2.5 " , width=450 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 2.5 " , width : 450 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 2.5 " ).width(450 ).crop(" crop " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop().width(450 ).aspectRatio(2.5 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 2.5 " , width : 450 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 2.5 " , width : 450 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop().width(450 ).aspectRatio(2.5 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 2.5 " width =" 450 " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop().width(450 ).aspectRatio(2.5 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 2.5 " width =" 450 " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
crop().width(450 ).aspectRatio(2.5 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 2.5 " width=" 450 " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 2.5 " ).Width(450 ).Crop(" crop " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 2.5 " ).setWidth(450 ).setCrop(" crop " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 2.5 " ).width(450 ).crop(" crop " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.crop() { width(450 )
aspectRatio(2.5F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(450)
.aspectRatio(2.5)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.crop().width(450)
.aspectRatio(2.5)));
Crop the woman
image without specifying dimensions, to keep only the face.
Ruby (cloudinary 1.x):
cl_image_tag(" woman.jpg " , :gravity =>" face " , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' woman.jpg ' ))
->resize(Resize ::crop()
->gravity(
Gravity ::focusOn(
FocusOn ::face()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" woman.jpg " , array (" gravity " =>" face " , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" woman.jpg " ).image(gravity=" face " , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" woman.jpg " , {gravity : " face " , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" face " ).crop(" crop " )).imageTag(" woman.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" woman.jpg " ).resize(crop().gravity(focusOn(face())));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' woman.jpg ' , {gravity : " face " , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" woman.jpg " , {gravity : " face " , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" woman.jpg " ).resize(crop().gravity(focusOn(face())));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" woman.jpg " >
<Transformation gravity =" face " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" woman.jpg " ).resize(crop().gravity(focusOn(face())));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" woman.jpg " >
<cld-transformation gravity =" face " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" woman.jpg " ).resize(crop().gravity(focusOn(face())));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" woman.jpg " >
<cl-transformation gravity=" face " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" face " ).Crop(" crop " )).BuildImageTag(" woman.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(" face " ).setCrop(" crop " )).generate(" woman.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" face " ).crop(" crop " )).generate(" woman.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" woman.jpg " )
resize(Resize.crop() {
gravity(
Gravity.focusOn(
FocusOn.face()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.crop()
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.crop()
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
Use the cld-decompose_tile
special gravity position to crop an image composed of many images, such as this, keeping only the largest "tile":
Ruby (cloudinary 1.x):
cl_image_tag(" docs/tiled-birds.jpg " , :gravity =>" cld-decompose_tile " , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/tiled-birds.jpg ' ))
->resize(Resize ::crop()
->gravity(
Gravity ::focusOn(
FocusOn ::cldDecomposeTile()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/tiled-birds.jpg " , array (" gravity " =>" cld-decompose_tile " , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/tiled-birds.jpg " ).image(gravity=" cld-decompose_tile " , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/tiled-birds.jpg " , {gravity : " cld-decompose_tile " , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" cld-decompose_tile " ).crop(" crop " )).imageTag(" docs/tiled-birds.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/tiled-birds.jpg " ).resize(
crop().gravity(focusOn(cldDecomposeTile()))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/tiled-birds.jpg ' , {gravity : " cld-decompose_tile " , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/tiled-birds.jpg " , {gravity : " cld-decompose_tile " , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/tiled-birds.jpg " ).resize(
crop().gravity(focusOn(cldDecomposeTile()))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/tiled-birds.jpg " >
<Transformation gravity =" cld-decompose_tile " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/tiled-birds.jpg " ).resize(
crop().gravity(focusOn(cldDecomposeTile()))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/tiled-birds.jpg " >
<cld-transformation gravity =" cld-decompose_tile " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/tiled-birds.jpg " ).resize(
crop().gravity(focusOn(cldDecomposeTile()))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/tiled-birds.jpg " >
<cl-transformation gravity=" cld-decompose_tile " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" cld-decompose_tile " ).Crop(" crop " )).BuildImageTag(" docs/tiled-birds.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(" cld-decompose_tile " ).setCrop(" crop " )).generate(" docs/tiled-birds.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" cld-decompose_tile " ).crop(" crop " )).generate(" docs/tiled-birds.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/tiled-birds.jpg " )
resize(Resize.crop() {
gravity(
Gravity.focusOn(
FocusOn.cldDecomposeTile()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/tiled-birds.jpg').transformation(Transformation()
.resize(Resize.crop()
.gravity(
Gravity.focusOn(
FocusOn.cldDecomposeTile()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/tiled-birds.jpg').transformation(Transformation()
.resize(Resize.crop()
.gravity(
Gravity.focusOn(
FocusOn.cldDecomposeTile()))
));
You can specify a region of the original image to crop by giving the x
and y
coordinates of the top left corner of the region together with the width
and height
of the region. You can also use percentage based numbers instead of the exact coordinates for x
, y
, w
and h
(e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.
For example, the following image shows many white sheep and one brown sheep.
Ruby (cloudinary 1.x):
cl_image_tag(" brown_sheep.jpg " )
PHP (cloudinary_php 2.x):
(new ImageTag (' brown_sheep.jpg ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" brown_sheep.jpg " )
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" brown_sheep.jpg " ).image()
Node.js (cloudinary 1.x):
cloudinary.image(" brown_sheep.jpg " )
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().imageTag(" brown_sheep.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" brown_sheep.jpg " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' brown_sheep.jpg ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" brown_sheep.jpg " )
React (@cloudinary/react 1.x):
new CloudinaryImage(" brown_sheep.jpg " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" brown_sheep.jpg " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" brown_sheep.jpg " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" brown_sheep.jpg " >
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" brown_sheep.jpg " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" brown_sheep.jpg " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.BuildImageTag(" brown_sheep.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().generate(" brown_sheep.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().generate(" brown_sheep.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" brown_sheep.jpg " )
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation());
Dart (cloudinary_dart 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation());
To resize the picture so that only the brown sheep is visible, the image is cropped to a 300x200 region starting at the coordinate x = 355 and y = 410:
Ruby (cloudinary 1.x):
cl_image_tag(" brown_sheep.jpg " , :height =>200 , :width =>300 , :x =>355 , :y =>410 , :crop =>" crop " )
PHP (cloudinary_php 2.x):
(new ImageTag (' brown_sheep.jpg ' ))
->resize(Resize ::crop()->width(300 )
->height(200 )
->x(355 )
->y(410 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" brown_sheep.jpg " , array (" height " =>200 , " width " =>300 , " x " =>355 , " y " =>410 , " crop " =>" crop " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" brown_sheep.jpg " ).image(height=200 , width=300 , x=355 , y=410 , crop=" crop " )
Node.js (cloudinary 1.x):
cloudinary.image(" brown_sheep.jpg " , {height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(200 ).width(300 ).x(355 ).y(410 ).crop(" crop " )).imageTag(" brown_sheep.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" brown_sheep.jpg " ).resize(
crop().width(300 ).height(200 ).x(355 ).y(410 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' brown_sheep.jpg ' , {height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" brown_sheep.jpg " , {height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" brown_sheep.jpg " ).resize(
crop().width(300 ).height(200 ).x(355 ).y(410 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" brown_sheep.jpg " >
<Transformation height =" 200 " width =" 300 " x =" 355 " y =" 410 " crop =" crop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" brown_sheep.jpg " ).resize(
crop().width(300 ).height(200 ).x(355 ).y(410 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" brown_sheep.jpg " >
<cld-transformation height =" 200 " width =" 300 " x =" 355 " y =" 410 " crop =" crop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" brown_sheep.jpg " ).resize(
crop().width(300 ).height(200 ).x(355 ).y(410 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" brown_sheep.jpg " >
<cl-transformation height=" 200 " width=" 300 " x=" 355 " y=" 410 " crop=" crop " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200 ).Width(300 ).X(355 ).Y(410 ).Crop(" crop " )).BuildImageTag(" brown_sheep.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200 ).setWidth(300 ).setX(355 ).setY(410 ).setCrop(" crop " )).generate(" brown_sheep.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(200 ).width(300 ).x(355 ).y(410 ).crop(" crop " )).generate(" brown_sheep.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" brown_sheep.jpg " )
resize(Resize.crop() { width(300 )
height(200 )
x(355 )
y(410 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation()
.resize(Resize.crop().width(300)
.height(200)
.x(355)
.y(410)));
Dart (cloudinary_dart 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation()
.resize(Resize.crop().width(300)
.height(200)
.x(355)
.y(410)));
The image can be further resized with chained transformations . For example, the 300x200 cropped version above, also scaled down to half that size:
Ruby (cloudinary 1.x):
cl_image_tag(" brown_sheep.jpg " , :transformation =>[
{:height =>200 , :width =>300 , :x =>355 , :y =>410 , :crop =>" crop " },
{:width =>150 , :crop =>" scale " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' brown_sheep.jpg ' ))
->resize(Resize ::crop()->width(300 )
->height(200 )
->x(355 )
->y(410 ))
->resize(Resize ::scale()->width(150 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" brown_sheep.jpg " , array (" transformation " =>array (
array (" height " =>200 , " width " =>300 , " x " =>355 , " y " =>410 , " crop " =>" crop " ),
array (" width " =>150 , " crop " =>" scale " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" brown_sheep.jpg " ).image(transformation=[
{' height ' : 200 , ' width ' : 300 , ' x ' : 355 , ' y ' : 410 , ' crop ' : " crop " },
{' width ' : 150 , ' crop ' : " scale " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" brown_sheep.jpg " , {transformation : [
{height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " },
{width : 150 , crop : " scale " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(200 ).width(300 ).x(355 ).y(410 ).crop(" crop " ).chain()
.width(150 ).crop(" scale " )).imageTag(" brown_sheep.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" brown_sheep.jpg " )
.resize(crop().width(300 ).height(200 ).x(355 ).y(410 ))
.resize(scale().width(150 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' brown_sheep.jpg ' , {transformation : [
{height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " },
{width : 150 , crop : " scale " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" brown_sheep.jpg " , {transformation : [
{height : 200 , width : 300 , x : 355 , y : 410 , crop : " crop " },
{width : 150 , crop : " scale " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" brown_sheep.jpg " )
.resize(crop().width(300 ).height(200 ).x(355 ).y(410 ))
.resize(scale().width(150 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" brown_sheep.jpg " >
<Transformation height =" 200 " width =" 300 " x =" 355 " y =" 410 " crop =" crop " />
<Transformation width =" 150 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" brown_sheep.jpg " )
.resize(crop().width(300 ).height(200 ).x(355 ).y(410 ))
.resize(scale().width(150 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" brown_sheep.jpg " >
<cld-transformation height =" 200 " width =" 300 " x =" 355 " y =" 410 " crop =" crop " />
<cld-transformation width =" 150 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" brown_sheep.jpg " )
.resize(crop().width(300 ).height(200 ).x(355 ).y(410 ))
.resize(scale().width(150 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" brown_sheep.jpg " >
<cl-transformation height=" 200 " width=" 300 " x=" 355 " y=" 410 " crop=" crop " >
</ cl-transformation>
<cl-transformation width="150" crop="scale">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Height(200 ).Width(300 ).X(355 ).Y(410 ).Crop(" crop " ).Chain()
.Width(150 ).Crop(" scale " )).BuildImageTag(" brown_sheep.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setHeight(200 ).setWidth(300 ).setX(355 ).setY(410 ).setCrop(" crop " ).chain()
.setWidth(150 ).setCrop(" scale " )).generate(" brown_sheep.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(200 ).width(300 ).x(355 ).y(410 ).crop(" crop " ).chain()
.width(150 ).crop(" scale " )).generate(" brown_sheep.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" brown_sheep.jpg " )
resize(Resize.crop() { width(300 )
height(200 )
x(355 )
y(410 ) })
resize(Resize.scale() { width(150 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation()
.resize(Resize.crop().width(300)
.height(200)
.x(355)
.y(410))
.resize(Resize.scale().width(150)));
Dart (cloudinary_dart 0.x):
cloudinary.image('brown_sheep.jpg').transformation(Transformation()
.resize(Resize.crop().width(300)
.height(200)
.x(355)
.y(410))
.resize(Resize.scale().width(150)));
The thumb
cropping mode is specifically used for creating image thumbnails from either face or custom coordinates, and must always be accompanied by the gravity parameter set to one of the face detection or custom values. This cropping mode generates a thumbnail of an image with the exact specified dimensions and with the original proportions retained, but the resulting image might be scaled to fit in the specified dimensions. You can specify the zoom parameter to determine how much to scale the resulting image within the specified dimensions.
Create a 150 x 150 thumbnail with face detection, of the woman
image. Below you can see the original image as well as the face detection based thumbnail:
Ruby (cloudinary 1.x):
cl_image_tag(" woman.jpg " , :gravity =>" face " , :height =>150 , :width =>150 , :crop =>" thumb " )
PHP (cloudinary_php 2.x):
(new ImageTag (' woman.jpg ' ))
->resize(Resize ::thumbnail()->width(150 )
->height(150 )
->gravity(
Gravity ::focusOn(
FocusOn ::face()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" woman.jpg " , array (" gravity " =>" face " , " height " =>150 , " width " =>150 , " crop " =>" thumb " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" woman.jpg " ).image(gravity=" face " , height=150 , width=150 , crop=" thumb " )
Node.js (cloudinary 1.x):
cloudinary.image(" woman.jpg " , {gravity : " face " , height : 150 , width : 150 , crop : " thumb " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().gravity(" face " ).height(150 ).width(150 ).crop(" thumb " )).imageTag(" woman.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.width(150 )
.height(150 )
.gravity(focusOn(face()))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' woman.jpg ' , {gravity : " face " , height : 150 , width : 150 , crop : " thumb " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" woman.jpg " , {gravity : " face " , height : 150 , width : 150 , crop : " thumb " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.width(150 )
.height(150 )
.gravity(focusOn(face()))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" woman.jpg " >
<Transformation gravity =" face " height =" 150 " width =" 150 " crop =" thumb " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.width(150 )
.height(150 )
.gravity(focusOn(face()))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" woman.jpg " >
<cld-transformation gravity =" face " height =" 150 " width =" 150 " crop =" thumb " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.width(150 )
.height(150 )
.gravity(focusOn(face()))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" woman.jpg " >
<cl-transformation gravity=" face " height=" 150 " width=" 150 " crop=" thumb " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(" face " ).Height(150 ).Width(150 ).Crop(" thumb " )).BuildImageTag(" woman.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(" face " ).setHeight(150 ).setWidth(150 ).setCrop(" thumb " )).generate(" woman.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().gravity(" face " ).height(150 ).width(150 ).crop(" thumb " )).generate(" woman.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" woman.jpg " )
resize(Resize.thumbnail() { width(150 )
height(150 )
gravity(
Gravity.focusOn(
FocusOn.face()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.thumbnail().width(150)
.height(150)
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.thumbnail().width(150)
.height(150)
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
Create a 150-pixel high thumbnail with aspect ratio 5:6 and face detection of the woman
image, zoomed out by 75%.
Ruby (cloudinary 1.x):
cl_image_tag(" woman.jpg " , :aspect_ratio =>" 5:6 " , :gravity =>" face " , :height =>150 , :zoom =>0.75 , :crop =>" thumb " )
PHP (cloudinary_php 2.x):
(new ImageTag (' woman.jpg ' ))
->resize(Resize ::thumbnail()->height(150 )
->aspectRatio(" 5:6 " )
->zoom(0.75 )
->gravity(
Gravity ::focusOn(
FocusOn ::face()))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" woman.jpg " , array (" aspect_ratio " =>" 5:6 " , " gravity " =>" face " , " height " =>150 , " zoom " =>" 0.75 " , " crop " =>" thumb " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" woman.jpg " ).image(aspect_ratio=" 5:6 " , gravity=" face " , height=150 , zoom=" 0.75 " , crop=" thumb " )
Node.js (cloudinary 1.x):
cloudinary.image(" woman.jpg " , {aspect_ratio : " 5:6 " , gravity : " face " , height : 150 , zoom : " 0.75 " , crop : " thumb " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 5:6 " ).gravity(" face " ).height(150 ).zoom(0.75 ).crop(" thumb " )).imageTag(" woman.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.height(150 )
.aspectRatio(" 5:6 " )
.zoom(0.75 )
.gravity(focusOn(face()))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' woman.jpg ' , {aspectRatio : " 5:6 " , gravity : " face " , height : 150 , zoom : " 0.75 " , crop : " thumb " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" woman.jpg " , {aspect_ratio : " 5:6 " , gravity : " face " , height : 150 , zoom : " 0.75 " , crop : " thumb " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.height(150 )
.aspectRatio(" 5:6 " )
.zoom(0.75 )
.gravity(focusOn(face()))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" woman.jpg " >
<Transformation aspectRatio =" 5:6 " gravity =" face " height =" 150 " zoom =" 0.75 " crop =" thumb " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.height(150 )
.aspectRatio(" 5:6 " )
.zoom(0.75 )
.gravity(focusOn(face()))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" woman.jpg " >
<cld-transformation aspect-ratio =" 5:6 " gravity =" face " height =" 150 " zoom =" 0.75 " crop =" thumb " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" woman.jpg " ).resize(
thumbnail()
.height(150 )
.aspectRatio(" 5:6 " )
.zoom(0.75 )
.gravity(focusOn(face()))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" woman.jpg " >
<cl-transformation aspect-ratio=" 5:6 " gravity=" face " height=" 150 " zoom=" 0.75 " crop=" thumb " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 5:6 " ).Gravity(" face " ).Height(150 ).Zoom(0.75 ).Crop(" thumb " )).BuildImageTag(" woman.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 5:6 " ).setGravity(" face " ).setHeight(150 ).setZoom(0.75 ).setCrop(" thumb " )).generate(" woman.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 5:6 " ).gravity(" face " ).height(150 ).zoom(0.75 ).crop(" thumb " )).generate(" woman.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" woman.jpg " )
resize(Resize.thumbnail() { height(150 )
aspectRatio(" 5:6 " )
zoom(0.75F )
gravity(
Gravity.focusOn(
FocusOn.face()))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.thumbnail().height(150)
.aspectRatio("5:6")
.zoom(0.75)
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('woman.jpg').transformation(Transformation()
.resize(Resize.thumbnail().height(150)
.aspectRatio("5:6")
.zoom(0.75)
.gravity(
Gravity.focusOn(
FocusOn.face()))
));
The scale
resize mode changes the size of the image exactly to the specified dimensions without necessarily retaining the original aspect ratio: all original image parts are visible but might be stretched or shrunk. If only the width or height is specified, then the image is scaled to the new dimension while retaining the original aspect ratio, unless you also include the ignore_aspect_ratio flag.
Scale the models image to a width of 150 pixels (maintains the aspect ratio by default):
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :width =>150 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::scale()->width(150 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" width " =>150 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(width=150 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {width : 150 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().width(150 ).crop(" scale " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {width : 150 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {width : 150 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation width =" 150 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation width =" 150 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation width=" 150 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150 ).Crop(" scale " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150 ).setCrop(" scale " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().width(150 ).crop(" scale " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.scale() { width(150 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(150)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(150)));
Scale the models image to a width and height of 150 pixels without maintaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>150 , :width =>150 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::scale()->width(150 )
->height(150 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>150 , " width " =>150 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=150 , width=150 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 150 , width : 150 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(150 ).width(150 ).crop(" scale " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ).height(150 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 150 , width : 150 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 150 , width : 150 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ).height(150 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 150 " width =" 150 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ).height(150 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 150 " width =" 150 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(150 ).height(150 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 150 " width=" 150 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(150 ).Width(150 ).Crop(" scale " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(150 ).setWidth(150 ).setCrop(" scale " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(150 ).width(150 ).crop(" scale " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.scale() { width(150 )
height(150 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(150)
.height(150)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(150)
.height(150)));
Scale the models image to a width of 25% (maintains the aspect ratio by default):
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :width =>0.25 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::scale()->width(0.25 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" width " =>" 0.25 " , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(width=" 0.25 " , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {width : " 0.25 " , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().width(0.25 ).crop(" scale " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(0.25 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {width : " 0.25 " , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {width : " 0.25 " , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(0.25 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation width =" 0.25 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(0.25 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation width =" 0.25 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(scale().width(0.25 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation width=" 0.25 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.25 ).Crop(" scale " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.25 ).setCrop(" scale " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().width(0.25 ).crop(" scale " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.scale() { width(0.25F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(0.25)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(0.25)));
Scale the models image to a width of 100, changing the aspect ratio to 1:2:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 1:2 " , :width =>100 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::scale()->width(100 )
->aspectRatio(" 1:2 " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 1:2 " , " width " =>100 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 1:2 " , width=100 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1:2 " , width : 100 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1:2 " ).width(100 ).crop(" scale " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale().width(100 ).aspectRatio(" 1:2 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 1:2 " , width : 100 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1:2 " , width : 100 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale().width(100 ).aspectRatio(" 1:2 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 1:2 " width =" 100 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale().width(100 ).aspectRatio(" 1:2 " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 1:2 " width =" 100 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale().width(100 ).aspectRatio(" 1:2 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 1:2 " width=" 100 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1:2 " ).Width(100 ).Crop(" scale " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1:2 " ).setWidth(100 ).setCrop(" scale " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1:2 " ).width(100 ).crop(" scale " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.scale() { width(100 )
aspectRatio(" 1:2 " ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(100)
.aspectRatio("1:2")));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().width(100)
.aspectRatio("1:2")));
Scale the models image to a height of 150, ignoring the aspect ratio:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :flags =>" ignore_aspect_ratio " , :height =>150 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::scale()->height(150 )
->aspectRatio(
AspectRatio ::ignoreInitialAspectRatio())
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" flags " =>" ignore_aspect_ratio " , " height " =>150 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(flags=" ignore_aspect_ratio " , height=150 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {flags : " ignore_aspect_ratio " , height : 150 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().flags(" ignore_aspect_ratio " ).height(150 ).crop(" scale " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale()
.height(150 )
.aspectRatio(ignoreInitialAspectRatio())
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {flags : " ignore_aspect_ratio " , height : 150 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {flags : " ignore_aspect_ratio " , height : 150 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale()
.height(150 )
.aspectRatio(ignoreInitialAspectRatio())
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation flags =" ignore_aspect_ratio " height =" 150 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale()
.height(150 )
.aspectRatio(ignoreInitialAspectRatio())
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation flags =" ignore_aspect_ratio " height =" 150 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
scale()
.height(150 )
.aspectRatio(ignoreInitialAspectRatio())
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation flags=" ignore_aspect_ratio " height=" 150 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(" ignore_aspect_ratio " ).Height(150 ).Crop(" scale " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(" ignore_aspect_ratio " ).setHeight(150 ).setCrop(" scale " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().flags(" ignore_aspect_ratio " ).height(150 ).crop(" scale " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.scale() { height(150 )
aspectRatio(
AspectRatio.ignoreInitialAspectRatio())
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().height(150)
.aspectRatio(
AspectRatio.ignoreInitialAspectRatio())
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.scale().height(150)
.aspectRatio(
AspectRatio.ignoreInitialAspectRatio())
));
The
scale
mode can be used to scale up or scale down an image, however when scaling up, the image often loses clarity. To retain clarity while upscaling an image, consider
upscaling with super resolution .
The fit
resize mode resizes the image so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original image is visible.
Resize the models image to fit within a width and height of 250 pixels while retaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>250 , :width =>250 , :crop =>" fit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::fit()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>250 , " width " =>250 , " crop " =>" fit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=250 , width=250 , crop=" fit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " fit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" fit " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fit().width(250 ).height(250 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 250 , width : 250 , crop : " fit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " fit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fit().width(250 ).height(250 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 250 " width =" 250 " crop =" fit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fit().width(250 ).height(250 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 250 " width =" 250 " crop =" fit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(fit().width(250 ).height(250 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 250 " width=" 250 " crop=" fit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" fit " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" fit " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" fit " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.fit() { width(250 )
height(250 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fit().width(250)
.height(250)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fit().width(250)
.height(250)));
Resize the models image to fit within a 150-pixel square defined by aspect ratio and height:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 1.0 " , :height =>150 , :crop =>" fit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::fit()->height(150 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 1.0 " , " height " =>150 , " crop " =>" fit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 1.0 " , height=150 , crop=" fit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " fit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" fit " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 1.0 " , height : 150 , crop : " fit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " fit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 1.0 " height =" 150 " crop =" fit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 1.0 " height =" 150 " crop =" fit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
fit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 1.0 " height=" 150 " crop=" fit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(150 ).Crop(" fit " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(150 ).setCrop(" fit " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" fit " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.fit() { height(150 )
aspectRatio(1.0F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fit().height(150)
.aspectRatio('1.0')));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.fit().height(150)
.aspectRatio('1.0')));
The limit
resize mode behaves the same as the fit
mode but only if the original image is larger than the specified limit (width and height), in which case the image is scaled down so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original image is visible. This mode doesn't scale up the image if your requested dimensions are larger than the original image's.
Limit the models image to a width and height of 250 pixels while retaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>250 , :width =>250 , :crop =>" limit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::limitFit()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>250 , " width " =>250 , " crop " =>" limit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=250 , width=250 , crop=" limit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " limit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" limit " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().width(250 ).height(250 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 250 , width : 250 , crop : " limit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " limit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().width(250 ).height(250 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 250 " width =" 250 " crop =" limit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().width(250 ).height(250 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 250 " width =" 250 " crop =" limit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().width(250 ).height(250 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 250 " width=" 250 " crop=" limit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" limit " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" limit " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" limit " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.limitFit() { width(250 )
height(250 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFit().width(250)
.height(250)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFit().width(250)
.height(250)));
Limit the models image to a 150-pixel square defined by aspect ratio and height:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 1.0 " , :height =>150 , :crop =>" limit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::limitFit()->height(150 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 1.0 " , " height " =>150 , " crop " =>" limit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 1.0 " , height=150 , crop=" limit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " limit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" limit " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 1.0 " , height : 150 , crop : " limit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " limit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 1.0 " height =" 150 " crop =" limit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 1.0 " height =" 150 " crop =" limit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
limitFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 1.0 " height=" 150 " crop=" limit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(150 ).Crop(" limit " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(150 ).setCrop(" limit " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" limit " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.limitFit() { height(150 )
aspectRatio(1.0F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFit().height(150)
.aspectRatio('1.0')));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.limitFit().height(150)
.aspectRatio('1.0')));
The mfit
resize mode behaves the same as the fit
mode but only if the original image is smaller than the specified minimum (width and height), in which case the image is scaled up so that it takes up as much space as possible within a bounding box defined by the specified dimensions. The original aspect ratio is retained and all of the original image is visible. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's.
Fit the models
image to a minimum width and height of 250 pixels while retaining the aspect ratio. This results in the original larger image being delivered:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :height =>250 , :width =>250 , :crop =>" mfit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::minimumFit()->width(250 )
->height(250 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" height " =>250 , " width " =>250 , " crop " =>" mfit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(height=250 , width=250 , crop=" mfit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " mfit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().height(250 ).width(250 ).crop(" mfit " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
minimumFit().width(250 ).height(250 )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {height : 250 , width : 250 , crop : " mfit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {height : 250 , width : 250 , crop : " mfit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
minimumFit().width(250 ).height(250 )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation height =" 250 " width =" 250 " crop =" mfit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
minimumFit().width(250 ).height(250 )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation height =" 250 " width =" 250 " crop =" mfit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
minimumFit().width(250 ).height(250 )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation height=" 250 " width=" 250 " crop=" mfit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250 ).Width(250 ).Crop(" mfit " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250 ).setWidth(250 ).setCrop(" mfit " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().height(250 ).width(250 ).crop(" mfit " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.minimumFit() { width(250 )
height(250 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.minimumFit().width(250)
.height(250)));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.minimumFit().width(250)
.height(250)));
Scale up the 100-pixel wide sample_100
image to fit a 150-pixel square defined by aspect ratio and height.
Ruby (cloudinary 1.x):
cl_image_tag(" docs/sample_100.jpg " , :aspect_ratio =>" 1.0 " , :height =>150 , :crop =>" mfit " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/sample_100.jpg ' ))
->resize(Resize ::minimumFit()->height(150 )
->aspectRatio(1.0 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/sample_100.jpg " , array (" aspect_ratio " =>" 1.0 " , " height " =>150 , " crop " =>" mfit " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/sample_100.jpg " ).image(aspect_ratio=" 1.0 " , height=150 , crop=" mfit " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/sample_100.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " mfit " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" mfit " )).imageTag(" docs/sample_100.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/sample_100.jpg ' , {aspectRatio : " 1.0 " , height : 150 , crop : " mfit " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/sample_100.jpg " , {aspect_ratio : " 1.0 " , height : 150 , crop : " mfit " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/sample_100.jpg " >
<Transformation aspectRatio =" 1.0 " height =" 150 " crop =" mfit " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/sample_100.jpg " >
<cld-transformation aspect-ratio =" 1.0 " height =" 150 " crop =" mfit " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumFit().height(150 ).aspectRatio(" 1.0 " )
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/sample_100.jpg " >
<cl-transformation aspect-ratio=" 1.0 " height=" 150 " crop=" mfit " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Height(150 ).Crop(" mfit " )).BuildImageTag(" docs/sample_100.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setHeight(150 ).setCrop(" mfit " )).generate(" docs/sample_100.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).height(150 ).crop(" mfit " )).generate(" docs/sample_100.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/sample_100.jpg " )
resize(Resize.minimumFit() { height(150 )
aspectRatio(1.0F ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/sample_100.jpg').transformation(Transformation()
.resize(Resize.minimumFit().height(150)
.aspectRatio('1.0')));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/sample_100.jpg').transformation(Transformation()
.resize(Resize.minimumFit().height(150)
.aspectRatio('1.0')));
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 parameter (set to center
by default), and specify the color of the background in the case that padding is added.
Resize and pad the models image with a black background to a width and height of 250 pixels:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :background =>" black " , :height =>250 , :width =>250 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::pad()->width(250 )
->height(250 )
->background(
Background ::color(Color ::BLACK ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" background " =>" black " , " height " =>250 , " width " =>250 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(background=" black " , height=250 , width=250 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {background : " black " , height : 250 , width : 250 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" black " ).height(250 ).width(250 ).crop(" pad " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {background : " black " , height : 250 , width : 250 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {background : " black " , height : 250 , width : 250 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation background =" black " height =" 250 " width =" 250 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation background =" black " height =" 250 " width =" 250 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.width(250 )
.height(250 )
.background(color(" black " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation background=" black " height=" 250 " width=" 250 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" black " ).Height(250 ).Width(250 ).Crop(" pad " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" black " ).setHeight(250 ).setWidth(250 ).setCrop(" pad " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" black " ).height(250 ).width(250 ).crop(" pad " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.pad() { width(250 )
height(250 )
background(
Background.color(Color .BLACK))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.pad().width(250)
.height(250)
.background(
Background.color(Color.BLACK))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.pad().width(250)
.height(250)
.background(
Background.color(Color.BLACK))
));
Resize and pad the models image with a black background to a rectangle of height of 150 pixels, and aspect ratio 2:1:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/models.jpg " , :aspect_ratio =>" 2:1 " , :background =>" black " , :height =>150 , :crop =>" pad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/models.jpg ' ))
->resize(Resize ::pad()->height(150 )
->aspectRatio(" 2:1 " )
->background(
Background ::color(Color ::BLACK ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/models.jpg " , array (" aspect_ratio " =>" 2:1 " , " background " =>" black " , " height " =>150 , " crop " =>" pad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/models.jpg " ).image(aspect_ratio=" 2:1 " , background=" black " , height=150 , crop=" pad " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 2:1 " , background : " black " , height : 150 , crop : " pad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 2:1 " ).background(" black " ).height(150 ).crop(" pad " )).imageTag(" docs/models.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/models.jpg ' , {aspectRatio : " 2:1 " , background : " black " , height : 150 , crop : " pad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/models.jpg " , {aspect_ratio : " 2:1 " , background : " black " , height : 150 , crop : " pad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/models.jpg " >
<Transformation aspectRatio =" 2:1 " background =" black " height =" 150 " crop =" pad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/models.jpg " >
<cld-transformation aspect-ratio =" 2:1 " background =" black " height =" 150 " crop =" pad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/models.jpg " ).resize(
pad()
.height(150 )
.aspectRatio(" 2:1 " )
.background(color(" black " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/models.jpg " >
<cl-transformation aspect-ratio=" 2:1 " background=" black " height=" 150 " crop=" pad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 2:1 " ).Background(" black " ).Height(150 ).Crop(" pad " )).BuildImageTag(" docs/models.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 2:1 " ).setBackground(" black " ).setHeight(150 ).setCrop(" pad " )).generate(" docs/models.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 2:1 " ).background(" black " ).height(150 ).crop(" pad " )).generate(" docs/models.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/models.jpg " )
resize(Resize.pad() { height(150 )
aspectRatio(" 2:1 " )
background(
Background.color(Color .BLACK))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.pad().height(150)
.aspectRatio("2:1")
.background(
Background.color(Color.BLACK))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/models.jpg').transformation(Transformation()
.resize(Resize.pad().height(150)
.aspectRatio("2:1")
.background(
Background.color(Color.BLACK))
));
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 parameter (set to center
by default), and specify the color of the background in the case that padding is added.
Limit the sample
image to a bounding box of 400 x 150 pixels, and pad with a green background:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :background =>" green " , :height =>150 , :width =>400 , :crop =>" lpad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::limitPad()->width(400 )
->height(150 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" background " =>" green " , " height " =>150 , " width " =>400 , " crop " =>" lpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(background=" green " , height=150 , width=400 , crop=" lpad " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {background : " green " , height : 150 , width : 400 , crop : " lpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" green " ).height(150 ).width(400 ).crop(" lpad " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {background : " green " , height : 150 , width : 400 , crop : " lpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {background : " green " , height : 150 , width : 400 , crop : " lpad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation background =" green " height =" 150 " width =" 400 " crop =" lpad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation background =" green " height =" 150 " width =" 400 " crop =" lpad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(400 )
.height(150 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation background=" green " height=" 150 " width=" 400 " crop=" lpad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" green " ).Height(150 ).Width(400 ).Crop(" lpad " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" green " ).setHeight(150 ).setWidth(400 ).setCrop(" lpad " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" green " ).height(150 ).width(400 ).crop(" lpad " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.limitPad() { width(400 )
height(150 )
background(
Background.color(Color .GREEN))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.limitPad().width(400)
.height(150)
.background(
Background.color(Color.GREEN))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.limitPad().width(400)
.height(150)
.background(
Background.color(Color.GREEN))
));
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:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :aspect_ratio =>" 0.66 " , :background =>" green " , :width =>100 , :crop =>" lpad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::limitPad()->width(100 )
->aspectRatio(0.66 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" aspect_ratio " =>" 0.66 " , " background " =>" green " , " width " =>100 , " crop " =>" lpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(aspect_ratio=" 0.66 " , background=" green " , width=100 , crop=" lpad " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {aspect_ratio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 0.66 " ).background(" green " ).width(100 ).crop(" lpad " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {aspectRatio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {aspect_ratio : " 0.66 " , background : " green " , width : 100 , crop : " lpad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation aspectRatio =" 0.66 " background =" green " width =" 100 " crop =" lpad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation aspect-ratio =" 0.66 " background =" green " width =" 100 " crop =" lpad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
limitPad()
.width(100 )
.aspectRatio(0.66 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation aspect-ratio=" 0.66 " background=" green " width=" 100 " crop=" lpad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 0.66 " ).Background(" green " ).Width(100 ).Crop(" lpad " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 0.66 " ).setBackground(" green " ).setWidth(100 ).setCrop(" lpad " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 0.66 " ).background(" green " ).width(100 ).crop(" lpad " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.limitPad() { width(100 )
aspectRatio(0.66F )
background(
Background.color(Color .GREEN))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
.background(
Background.color(Color.GREEN))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.limitPad().width(100)
.aspectRatio(0.66)
.background(
Background.color(Color.GREEN))
));
The mpad
resize mode behaves the same as the pad
mode but only if the original image is smaller than the specified minimum (width and height), in which case the image is unchanged but padding is added to fill the specified dimensions. This mode doesn't scale down the image if your requested dimensions are smaller than the original image's. You can also specify where the original image is placed by using the gravity parameter (set to center
by default), and specify the color of the background in the case that padding is added.
Minimum pad the 100-pixel wide image sample_100
to a width and height of 200 pixels while retaining the aspect ratio:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/sample_100.jpg " , :background =>" green " , :height =>200 , :width =>200 , :crop =>" mpad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/sample_100.jpg ' ))
->resize(Resize ::minimumPad()->width(200 )
->height(200 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/sample_100.jpg " , array (" background " =>" green " , " height " =>200 , " width " =>200 , " crop " =>" mpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/sample_100.jpg " ).image(background=" green " , height=200 , width=200 , crop=" mpad " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/sample_100.jpg " , {background : " green " , height : 200 , width : 200 , crop : " mpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" green " ).height(200 ).width(200 ).crop(" mpad " )).imageTag(" docs/sample_100.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(200 )
.height(200 )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/sample_100.jpg ' , {background : " green " , height : 200 , width : 200 , crop : " mpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/sample_100.jpg " , {background : " green " , height : 200 , width : 200 , crop : " mpad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(200 )
.height(200 )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/sample_100.jpg " >
<Transformation background =" green " height =" 200 " width =" 200 " crop =" mpad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(200 )
.height(200 )
.background(color(" green " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/sample_100.jpg " >
<cld-transformation background =" green " height =" 200 " width =" 200 " crop =" mpad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(200 )
.height(200 )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/sample_100.jpg " >
<cl-transformation background=" green " height=" 200 " width=" 200 " crop=" mpad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" green " ).Height(200 ).Width(200 ).Crop(" mpad " )).BuildImageTag(" docs/sample_100.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" green " ).setHeight(200 ).setWidth(200 ).setCrop(" mpad " )).generate(" docs/sample_100.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" green " ).height(200 ).width(200 ).crop(" mpad " )).generate(" docs/sample_100.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/sample_100.jpg " )
resize(Resize.minimumPad() { width(200 )
height(200 )
background(
Background.color(Color .GREEN))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/sample_100.jpg').transformation(Transformation()
.resize(Resize.minimumPad().width(200)
.height(200)
.background(
Background.color(Color.GREEN))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/sample_100.jpg').transformation(Transformation()
.resize(Resize.minimumPad().width(200)
.height(200)
.background(
Background.color(Color.GREEN))
));
Minimum pad the sample
image to a square of 200 pixels, defined by aspect ratio and width. This results in the original larger image being delivered:
Ruby (cloudinary 1.x):
cl_image_tag(" sample.jpg " , :aspect_ratio =>" 1.0 " , :background =>" green " , :width =>200 , :crop =>" mpad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' sample.jpg ' ))
->resize(Resize ::minimumPad()->width(200 )
->aspectRatio(1.0 )
->background(
Background ::color(Color ::GREEN ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" sample.jpg " , array (" aspect_ratio " =>" 1.0 " , " background " =>" green " , " width " =>200 , " crop " =>" mpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" sample.jpg " ).image(aspect_ratio=" 1.0 " , background=" green " , width=200 , crop=" mpad " )
Node.js (cloudinary 1.x):
cloudinary.image(" sample.jpg " , {aspect_ratio : " 1.0 " , background : " green " , width : 200 , crop : " mpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().aspectRatio(" 1.0 " ).background(" green " ).width(200 ).crop(" mpad " )).imageTag(" sample.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
minimumPad()
.width(200 )
.aspectRatio(" 1.0 " )
.background(color(" green " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' sample.jpg ' , {aspectRatio : " 1.0 " , background : " green " , width : 200 , crop : " mpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" sample.jpg " , {aspect_ratio : " 1.0 " , background : " green " , width : 200 , crop : " mpad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
minimumPad()
.width(200 )
.aspectRatio(" 1.0 " )
.background(color(" green " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" sample.jpg " >
<Transformation aspectRatio =" 1.0 " background =" green " width =" 200 " crop =" mpad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
minimumPad()
.width(200 )
.aspectRatio(" 1.0 " )
.background(color(" green " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" sample.jpg " >
<cld-transformation aspect-ratio =" 1.0 " background =" green " width =" 200 " crop =" mpad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" sample.jpg " ).resize(
minimumPad()
.width(200 )
.aspectRatio(" 1.0 " )
.background(color(" green " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" sample.jpg " >
<cl-transformation aspect-ratio=" 1.0 " background=" green " width=" 200 " crop=" mpad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio(" 1.0 " ).Background(" green " ).Width(200 ).Crop(" mpad " )).BuildImageTag(" sample.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio(" 1.0 " ).setBackground(" green " ).setWidth(200 ).setCrop(" mpad " )).generate(" sample.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().aspectRatio(" 1.0 " ).background(" green " ).width(200 ).crop(" mpad " )).generate(" sample.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" sample.jpg " )
resize(Resize.minimumPad() { width(200 )
aspectRatio(1.0F )
background(
Background.color(Color .GREEN))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.minimumPad().width(200)
.aspectRatio('1.0')
.background(
Background.color(Color.GREEN))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('sample.jpg').transformation(Transformation()
.resize(Resize.minimumPad().width(200)
.aspectRatio('1.0')
.background(
Background.color(Color.GREEN))
));
Minimum pad the 100-pixel wide image sample_100
to a 175 x 125 pixel rectangle, positioned offset from the top-left:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/sample_100.jpg " , :background =>" pink " , :gravity =>" north_west " , :height =>125 , :width =>175 , :x =>20 , :y =>20 , :crop =>" mpad " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/sample_100.jpg ' ))
->resize(Resize ::minimumPad()->width(175 )
->height(125 )
->gravity(
Gravity ::compass(
Compass ::northWest()))
->offsetX(20 )
->offsetY(20 )
->background(
Background ::color(Color ::PINK ))
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/sample_100.jpg " , array (" background " =>" pink " , " gravity " =>" north_west " , " height " =>125 , " width " =>175 , " x " =>20 , " y " =>20 , " crop " =>" mpad " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/sample_100.jpg " ).image(background=" pink " , gravity=" north_west " , height=125 , width=175 , x=20 , y=20 , crop=" mpad " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/sample_100.jpg " , {background : " pink " , gravity : " north_west " , height : 125 , width : 175 , x : 20 , y : 20 , crop : " mpad " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().background(" pink " ).gravity(" north_west " ).height(125 ).width(175 ).x(20 ).y(20 ).crop(" mpad " )).imageTag(" docs/sample_100.jpg " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(175 )
.height(125 )
.gravity(compass(" north_west " ))
.offsetX(20 )
.offsetY(20 )
.background(color(" pink " ))
);
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/sample_100.jpg ' , {background : " pink " , gravity : " north_west " , height : 125 , width : 175 , x : 20 , y : 20 , crop : " mpad " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/sample_100.jpg " , {background : " pink " , gravity : " north_west " , height : 125 , width : 175 , x : 20 , y : 20 , crop : " mpad " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(175 )
.height(125 )
.gravity(compass(" north_west " ))
.offsetX(20 )
.offsetY(20 )
.background(color(" pink " ))
);
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/sample_100.jpg " >
<Transformation background =" pink " gravity =" north_west " height =" 125 " width =" 175 " x =" 20 " y =" 20 " crop =" mpad " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(175 )
.height(125 )
.gravity(compass(" north_west " ))
.offsetX(20 )
.offsetY(20 )
.background(color(" pink " ))
);
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/sample_100.jpg " >
<cld-transformation background =" pink " gravity =" north_west " height =" 125 " width =" 175 " x =" 20 " y =" 20 " crop =" mpad " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/sample_100.jpg " ).resize(
minimumPad()
.width(175 )
.height(125 )
.gravity(compass(" north_west " ))
.offsetX(20 )
.offsetY(20 )
.background(color(" pink " ))
);
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/sample_100.jpg " >
<cl-transformation background=" pink " gravity=" north_west " height=" 125 " width=" 175 " x=" 20 " y=" 20 " crop=" mpad " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Background(" pink " ).Gravity(" north_west " ).Height(125 ).Width(175 ).X(20 ).Y(20 ).Crop(" mpad " )).BuildImageTag(" docs/sample_100.jpg " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBackground(" pink " ).setGravity(" north_west " ).setHeight(125 ).setWidth(175 ).setX(20 ).setY(20 ).setCrop(" mpad " )).generate(" docs/sample_100.jpg " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().background(" pink " ).gravity(" north_west " ).height(125 ).width(175 ).x(20 ).y(20 ).crop(" mpad " )).generate(" docs/sample_100.jpg " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/sample_100.jpg " )
resize(Resize.minimumPad() { width(175 )
height(125 )
gravity(
Gravity.compass(
Compass.northWest()))
offsetX(20 )
offsetY(20 )
background(
Background.color(Color .PINK))
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('docs/sample_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))
));
Dart (cloudinary_dart 0.x):
cloudinary.image('docs/sample_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))
));
Try out this interactive demo to see the results of different cropping methods, given a specific viewport size.