Resizing an image to fill given dimensions
Resizing an image to fill given dimensions
Cropping
Media acceleration
SEO
Beginner

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: Original

https://res.cloudinary.com/demo/image/upload/boulder.jpg

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

https://res.cloudinary.com/demo/image/upload/w_150,h_300,c_fill/boulder.jpg

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: Fill 500x150

https://res.cloudinary.com/demo/image/upload/w_500,h_150,c_fill/boulder.jpg

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.

Boulder

https://res.cloudinary.com/demo/image/upload/w_500,h_150,c_fill,g_south/boulder.jpg

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