This quick guide provides an overview of how to achieve some common variations of resize and crop for your images using ImageKit. For a detailed explanation and documentation, please check the resizing and cropping guides.

We will use the below image for all our examples

1. Resizing with only one dimension specified

Preserves aspect ratio, no cropping

Useful when you are placing the image inside a container where only one dimension is fixed and you want the aspect ratio to be preserved.

Image with width 300px and height is adjusted automatically to preserve aspect ratio

https://ik.imagekit.io/demo/img/tr:w-300/d_12.jpg

Resize with height 200px and width is automatically adjusted

https://ik.imagekit.io/demo/img/tr:h-200/d_12.jpg

2. Resize with both height and width specified

Preserves aspect ratio but may crop the image

Useful when you want an exactly sized image and want to maintain aspect ratio. However the new size that you specify, if does not have the same aspect ratio as the original image, then some cropping would occur.

Image with height = 300px and width = 300px. Notice that the top and the bottom are cropped in this image.

https://ik.imagekit.io/demo/img/tr:h-300,w-300/d_12.jpg

3. Image to be equal or smaller than the specified dimensions

Maintains aspect ratio, no cropping, image is smaller or equal to the dimension specified.

Useful when you have to preserve the aspect ratio and get the image to fit an image container with some specific dimensions.

In this case, the height is 300px but to preserve aspect ratio width is kept < 300px

https://ik.imagekit.io/demo/img/tr:h-300,w-300,c-at_max/d_12.jpg

4. Image to be at least as big as the specified dimensions

No change in aspect ratio, no cropping, the image is equal or larger than specified dimensions.

Useful when you have an image container and you want to be 100% sure that the image is equal or larger than that container dimensions.

https://ik.imagekit.io/demo/img/tr:h-300,w-300,c-at_least/d_12.jpg

Image with dimensions at least 300px by 300px. Here the width is 300px and height is larger than 300px

5. Image with padding on the sides

No change is aspect ratio, solid background with the image

Useful when you want to unify the final image sizes for images with different aspect ratios without cropping any part of the image

https://ik.imagekit.io/demo/img/tr:h-300,w-300,cm-pad_resize/d_12.jpg

Image with final dimensions of 500px by 300px. To get this size, without cropping or enlargement, the image is padded with white background on the sides

6. Extract a portion of the image

No resize, cropping is done to get a small portion of the image

Useful when you don’t want to resize down the image but want to extract a portion from the image.

https://ik.imagekit.io/demo/img/tr:h-300,w-300,cm-pad_extract/d_12.jpg

Example of extract cropping mode to extract the center of the image without resizing. The default focus on center can be changed using the “fo” URL-parameter.

These are just a few examples of commonly used resize and crop combinations. For a detailed explanation and documentation, please check the resizing and cropping guides.

Did this answer your question?