Resizing an image to fill given dimensions

Resize your images to fill specified dimensions by setting the width and height (w and h in URLs), while setting the crop parameter to fill (c_fill in URLs). This will resize and crop the image so an image with the exact specified dimensions is generated. The fill crop mode keeps the original image's aspect ratio, therefore parts of the images may be cut-off.

The fill crop mode creates an image with the exact given width and height while retaining original proportions. This will generate a transformed cropped image which will use only part of the image that fills the given dimensions. Only part of the original image might be visible if the requested proportions are different than the original ones.

Here's an original image:

Ruby:
Copy to clipboard
cl_image_tag("boulder.jpg")
PHP:
Copy to clipboard
cl_image_tag("boulder.jpg")
Python:
Copy to clipboard
CloudinaryImage("boulder.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("boulder.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("boulder.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('boulder.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("boulder.jpg")
React:
Copy to clipboard
<Image publicId="boulder.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="boulder.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="boulder.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("boulder.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("boulder.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("boulder.jpg")!, cloudinary: cloudinary)
Original

Here is the same image after cropping and filling a 150x300 rectangle based on the original image:

Ruby:
Copy to clipboard
cl_image_tag("boulder.jpg", :width=>150, :height=>300, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("boulder.jpg", array("width"=>150, "height"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("boulder.jpg").image(width=150, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).height(300).crop("fill")).imageTag("boulder.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('boulder.jpg', {width: 150, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="boulder.jpg" >
  <Transformation width="150" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="boulder.jpg" >
  <cld-transformation width="150" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="150" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(300).Crop("fill")).BuildImageTag("boulder.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).height(300).crop("fill")).generate("boulder.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(300).setCrop("fill")).generate("boulder.jpg")!, cloudinary: cloudinary)
Fill 150x300

The generated image is exactly 150x300, notice that not all parts of the image are visible.

Here's an example of a horizontal image crop:

Ruby:
Copy to clipboard
cl_image_tag("boulder.jpg", :width=>500, :height=>150, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("boulder.jpg", array("width"=>500, "height"=>150, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("boulder.jpg").image(width=500, height=150, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("boulder.jpg", {width: 500, height: 150, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(500).height(150).crop("fill")).imageTag("boulder.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('boulder.jpg', {width: 500, height: 150, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("boulder.jpg", {width: 500, height: 150, crop: "fill"})
React:
Copy to clipboard
<Image publicId="boulder.jpg" >
  <Transformation width="500" height="150" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="boulder.jpg" >
  <cld-transformation width="500" height="150" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="500" height="150" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(150).Crop("fill")).BuildImageTag("boulder.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(500).height(150).crop("fill")).generate("boulder.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setHeight(150).setCrop("fill")).generate("boulder.jpg")!, cloudinary: cloudinary)
Fill 500x150

By default, the cropping is based on the center of the image. You can change the gravity parameter (g in URLs) to crop based on other parts of the image.

Ruby:
Copy to clipboard
cl_image_tag("boulder.jpg", :width=>500, :height=>150, :gravity=>"south", :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("boulder.jpg", array("width"=>500, "height"=>150, "gravity"=>"south", "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("boulder.jpg").image(width=500, height=150, gravity="south", crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("boulder.jpg", {width: 500, height: 150, gravity: "south", crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(500).height(150).gravity("south").crop("fill")).imageTag("boulder.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('boulder.jpg', {width: 500, height: 150, gravity: "south", crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("boulder.jpg", {width: 500, height: 150, gravity: "south", crop: "fill"})
React:
Copy to clipboard
<Image publicId="boulder.jpg" >
  <Transformation width="500" height="150" gravity="south" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="boulder.jpg" >
  <cld-transformation width="500" height="150" gravity="south" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="500" height="150" gravity="south" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(150).Gravity("south").Crop("fill")).BuildImageTag("boulder.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(500).height(150).gravity("south").crop("fill")).generate("boulder.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setHeight(150).setGravity("south").setCrop("fill")).generate("boulder.jpg")!, cloudinary: cloudinary)
Boulder

The supported gravity values are: north_west, north, north_east, west, center (Default), east, south_west, south, south_east, face and faces.

by Itay Taragano