Limiting an image by specified dimensions

Limit the size of the image by specifying the width and height (w and h in URLs) while setting the crop parameter to limit. This will create an image that does not exceed the given width and height. All original image parts remain visible and the aspect ratio of the original image is kept.

Here's an original image:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/cashew_chicken.jpg

Ruby:

cl_image_tag("cashew_chicken.jpg")

PHP v1:

cl_image_tag("cashew_chicken.jpg")

PHP v2:

(new ImageTag('cashew_chicken.jpg'));

Python:

CloudinaryImage("cashew_chicken.jpg").image()

Node.js:

cloudinary.image("cashew_chicken.jpg")

Java:

cloudinary.url().imageTag("cashew_chicken.jpg");

JS:

cloudinary.imageTag('cashew_chicken.jpg').toHtml();

jQuery:

$.cloudinary.image("cashew_chicken.jpg")

React:

<Image publicId="cashew_chicken.jpg" >

</Image>

Vue.js:

<cld-image publicId="cashew_chicken.jpg" >

</cld-image>

Angular:

<cl-image public-id="cashew_chicken.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("cashew_chicken.jpg")

Android:

MediaManager.get().url().generate("cashew_chicken.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("cashew_chicken.jpg")!, cloudinary: cloudinary)

Here's the same image, limited to 70x70 pixels:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_70,h_70,c_limit/cashew_chicken.jpg

Ruby:

cl_image_tag("cashew_chicken.jpg", :width=>70, :height=>70, :crop=>"limit")

PHP v1:

cl_image_tag("cashew_chicken.jpg", array("width"=>70, "height"=>70, "crop"=>"limit"))

PHP v2:

(new ImageTag('cashew_chicken.jpg'))
  ->resize(Resize::limitFit()->width(70)->height(70));

Python:

CloudinaryImage("cashew_chicken.jpg").image(width=70, height=70, crop="limit")

Node.js:

cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})

Java:

cloudinary.url().transformation(new Transformation().width(70).height(70).crop("limit")).imageTag("cashew_chicken.jpg");

JS:

cloudinary.imageTag('cashew_chicken.jpg', {width: 70, height: 70, crop: "limit"}).toHtml();

jQuery:

$.cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})

React:

<Image publicId="cashew_chicken.jpg" >
  <Transformation width="70" height="70" crop="limit" />
</Image>

Vue.js:

<cld-image publicId="cashew_chicken.jpg" >
  <cld-transformation width="70" height="70" crop="limit" />
</cld-image>

Angular:

<cl-image public-id="cashew_chicken.jpg" >
  <cl-transformation width="70" height="70" crop="limit">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(70).Crop("limit")).BuildImageTag("cashew_chicken.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(70).height(70).crop("limit")).generate("cashew_chicken.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(70).setCrop("limit")).generate("cashew_chicken.jpg")!, cloudinary: cloudinary)

Note that since the aspect ratio is kept, this transformation actually resulted a 70x47 pixels image.

When setting the width and height parameters to values that exceed the original image's dimensions, this will actually deliver the original image as is (850x565 px):

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_1000,h_1000,c_limit/cashew_chicken.jpg

Ruby:

cl_image_tag("cashew_chicken.jpg", :width=>1000, :height=>1000, :crop=>"limit")

PHP v1:

cl_image_tag("cashew_chicken.jpg", array("width"=>1000, "height"=>1000, "crop"=>"limit"))

PHP v2:

(new ImageTag('cashew_chicken.jpg'))
  ->resize(Resize::limitFit()->width(1000)->height(1000));

Python:

CloudinaryImage("cashew_chicken.jpg").image(width=1000, height=1000, crop="limit")

Node.js:

cloudinary.image("cashew_chicken.jpg", {width: 1000, height: 1000, crop: "limit"})

Java:

cloudinary.url().transformation(new Transformation().width(1000).height(1000).crop("limit")).imageTag("cashew_chicken.jpg");

JS:

cloudinary.imageTag('cashew_chicken.jpg', {width: 1000, height: 1000, crop: "limit"}).toHtml();

jQuery:

$.cloudinary.image("cashew_chicken.jpg", {width: 1000, height: 1000, crop: "limit"})

React:

<Image publicId="cashew_chicken.jpg" >
  <Transformation width="1000" height="1000" crop="limit" />
</Image>

Vue.js:

<cld-image publicId="cashew_chicken.jpg" >
  <cld-transformation width="1000" height="1000" crop="limit" />
</cld-image>

Angular:

<cl-image public-id="cashew_chicken.jpg" >
  <cl-transformation width="1000" height="1000" crop="limit">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1000).Height(1000).Crop("limit")).BuildImageTag("cashew_chicken.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(1000).height(1000).crop("limit")).generate("cashew_chicken.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(1000).setHeight(1000).setCrop("limit")).generate("cashew_chicken.jpg")!, cloudinary: cloudinary)