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.

Original

Original

Fill 150x300

Fill 150x300

Fill 500x150

Fill 500x150
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)
by Itay Taragano