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:
cl_image_tag("boulder.jpg")
PHP:
cl_image_tag("boulder.jpg")
Python:
CloudinaryImage("boulder.jpg").image()
Node.js:
cloudinary.image("boulder.jpg")
Java:
cloudinary.url().imageTag("boulder.jpg")
JS:
cl.imageTag('boulder.jpg').toHtml();
jQuery:
$.cloudinary.image("boulder.jpg")
React:
<Image publicId="boulder.jpg" >

</Image>
Angular:
<cl-image public-id="boulder.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("boulder.jpg")
Android:
MediaManager.get().url().generate("boulder.jpg")
Original

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

Ruby:
cl_image_tag("boulder.jpg", :width=>150, :height=>300, :crop=>"fill")
PHP:
cl_image_tag("boulder.jpg", array("width"=>150, "height"=>300, "crop"=>"fill"))
Python:
CloudinaryImage("boulder.jpg").image(width=150, height=300, crop="fill")
Node.js:
cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(150).height(300).crop("fill")).imageTag("boulder.jpg")
JS:
cl.imageTag('boulder.jpg', {width: 150, height: 300, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
React:
<Image publicId="boulder.jpg" >
  <Transformation width="150" height="300" crop="fill" />
</Image>
Angular:
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="150" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(300).Crop("fill")).BuildImageTag("boulder.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(300).crop("fill")).generate("boulder.jpg")
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:
cl_image_tag("boulder.jpg", :width=>500, :height=>150, :crop=>"fill")
PHP:
cl_image_tag("boulder.jpg", array("width"=>500, "height"=>150, "crop"=>"fill"))
Python:
CloudinaryImage("boulder.jpg").image(width=500, height=150, crop="fill")
Node.js:
cloudinary.image("boulder.jpg", {width: 500, height: 150, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(500).height(150).crop("fill")).imageTag("boulder.jpg")
JS:
cl.imageTag('boulder.jpg', {width: 500, height: 150, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("boulder.jpg", {width: 500, height: 150, crop: "fill"})
React:
<Image publicId="boulder.jpg" >
  <Transformation width="500" height="150" crop="fill" />
</Image>
Angular:
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="500" height="150" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(150).Crop("fill")).BuildImageTag("boulder.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).height(150).crop("fill")).generate("boulder.jpg")
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:
cl_image_tag("boulder.jpg", :width=>500, :height=>150, :gravity=>"south", :crop=>"fill")
PHP:
cl_image_tag("boulder.jpg", array("width"=>500, "height"=>150, "gravity"=>"south", "crop"=>"fill"))
Python:
CloudinaryImage("boulder.jpg").image(width=500, height=150, gravity="south", crop="fill")
Node.js:
cloudinary.image("boulder.jpg", {width: 500, height: 150, gravity: "south", crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(500).height(150).gravity("south").crop("fill")).imageTag("boulder.jpg")
JS:
cl.imageTag('boulder.jpg', {width: 500, height: 150, gravity: "south", crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("boulder.jpg", {width: 500, height: 150, gravity: "south", crop: "fill"})
React:
<Image publicId="boulder.jpg" >
  <Transformation width="500" height="150" gravity="south" crop="fill" />
</Image>
Angular:
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="500" height="150" gravity="south" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Height(150).Gravity("south").Crop("fill")).BuildImageTag("boulder.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).height(150).gravity("south").crop("fill")).generate("boulder.jpg")
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