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:
Ruby:
cl_image_tag("cashew_chicken.jpg")
PHP:
cl_image_tag("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:
Ruby:
cl_image_tag("cashew_chicken.jpg", :width=>70, :height=>70, :crop=>"limit")
PHP:
cl_image_tag("cashew_chicken.jpg", array("width"=>70, "height"=>70, "crop"=>"limit"))
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):
Ruby:
cl_image_tag("cashew_chicken.jpg", :width=>1000, :height=>1000, :crop=>"limit")
PHP:
cl_image_tag("cashew_chicken.jpg", array("width"=>1000, "height"=>1000, "crop"=>"limit"))
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)