Cloudinary Cookbook recipes about Scale

Resize an image

Resize your images by setting the width and/or height parameters (w and h in URLs). When resizing using Cloudinary's URL-based transformations, Cloudinary will automatically apply the scale crop mode. Alternatively, you can use any one of our many supported crop modes.

Original

Scaled

Stretched

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg

Ruby:

cl_image_tag("turtles.jpg", :width=>70, :height=>53, :crop=>"scale")

PHP:

cl_image_tag("turtles.jpg", array("width"=>70, "height"=>53, "crop"=>"scale"))

Python:

CloudinaryImage("turtles.jpg").image(width=70, height=53, crop="scale")

Node.js:

cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(70).height(53).crop("scale")).imageTag("turtles.jpg");

JS:

cloudinary.imageTag('turtles.jpg', {width: 70, height: 53, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})

React:

<Image publicId="turtles.jpg" >
  <Transformation width="70" height="53" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="turtles.jpg" >
  <cld-transformation width="70" height="53" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="turtles.jpg" >
  <cl-transformation width="70" height="53" crop="scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(53).Crop("scale")).BuildImageTag("turtles.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(70).height(53).crop("scale")).generate("turtles.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(53).setCrop("scale")).generate("turtles.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 11, 2014

Tags: