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:
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" width="150" height="300" crop="fill">
        <Transformation width=150 height=300 crop="fill" />
</Image>
Angular:
<cl-image public-id="boulder.jpg" width="150" height="300" crop="fill">
        <cl-transformation width=150 height=300 crop="fill" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(300).Crop("fill")).BuildImageTag("boulder.jpg")
by Itay Taragano